边做边学入门微信小程序之仿豆瓣评分 (7)

在poster.js中写入一些模拟数据：

// pages/movies/poster/poster.js
Page({
data: {
title: "奇迹男孩 Wonder",
images: {
large: "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2507709428.jpg"
},
rating: {
average: 8.6,
max: 10,
min: 0,
stars: "45"
}
}
})

我们将在页面中通过绑定数据来获取这些数据，如电影名称{{title}}、海报图片{{images.large}}、电影评分{{rating.average}}等。

在poster.wxss中写入：

/* 导入评分条模板wxss文件，注意是@import */
@import "../ratingbar/ratingbar.wxss";
.movie {
display: flex;
flex-direction: column;
padding-right: 12rpx;
}
.poster {
width: 200rpx;
height: 270rpx;
padding-bottom: 10rpx;
}
.movie-name {
color: #333333;
font-size: 24rpx;
line-height: 24rpx;
margin: 10rpx 0 5rpx 0;
}
.ratingbar {
display: flex;
flex-direction: row;
}
.ratingbar-score{
color: #999999;
font-size: 20rpx;
}
模板的使用

这里用到了评分条模板，因此在开头导入了评分条模板的wxss样式。每个.样式都对应着下文相关控件的class。

在poster.wxml中写入：

<!--导入评分条模板wxml文件，注意别少了后面的 / 符号-->
<import src=http://www.likecs.com/"../ratingbar/ratingbar.wxml" />
<view class=http://www.likecs.com/'movie' catchtap=http://www.likecs.com/'catchTapMovie' data-movieid=http://www.likecs.com/'{{id}}'>
<!--海报图-->
<image class=http://www.likecs.com/"poster" src=http://www.likecs.com/'{{images.large}}'></image>
<!--电影名称-->
<text class=http://www.likecs.com/'movie-name'>{{title}}</text>
<!--评分星星和数字-->
<view class=http://www.likecs.com/'ratingbar'>
<!--评分条-->
<template is=http://www.likecs.com/"template-ratingbar-stars" data=http://www.likecs.com/"{{...rating}}" />
<!--评分分数-->
<text class=http://www.likecs.com/'ratingbar-score'>{{rating.average}}</text>
</view>
</view>

同理，开头也导入了评分条模板的wxml文件，并通过以下方式使用。

<!--评分条-->
<template is=http://www.likecs.com/"template-ratingbar-stars" data=http://www.likecs.com/"{{...rating}}" />

is属性值正是评分条模板的name名称，data值将相关数据传入评分条模板。

poster.js的data属性中含有rating数据，其格式见下文。上文中的…rating即是将rating数据散开，将其内容传入评分条模板，评分条模板里可以直接使用{{stars}}，而不需要通过{{rating.stars}}的方式。

rating: {
average: 8.6,
max: 10,
min: 0,
stars: "45"
}

这里还出现了诸如下文的属性名，我们将留到后面讲解。

<view class=http://www.likecs.com/'movie' catchtap=http://www.likecs.com/'catchTapMovie' data-movieid=http://www.likecs.com/'{{id}}'>

现在，将poster.js的data属性中的模拟数据注释或删除掉，并将poster.wxml封装成模版，如下文所示。

<!--导入评分条模板wxml文件，注意别少了后面的 / 符号-->
<import src=http://www.likecs.com/"../ratingbar/ratingbar.wxml" />
<!--封装成名称为template-poster的模板-->
<template name=http://www.likecs.com/"template-poster">
<view class=http://www.likecs.com/'movie' catchtap=http://www.likecs.com/'catchTapMovie' data-movieid=http://www.likecs.com/'{{id}}'>
<!--海报图-->
<image class=http://www.likecs.com/"poster" src=http://www.likecs.com/'{{images.large}}'></image>
<!--电影名称-->
<text class=http://www.likecs.com/'movie-name'>{{title}}</text>
<!--评分星星和数字-->
<view class=http://www.likecs.com/'ratingbar'>
<!--评分条-->
<template is=http://www.likecs.com/"template-ratingbar-stars" data=http://www.likecs.com/"{{...rating}}" />
<!--评分分数-->
<text class=http://www.likecs.com/'ratingbar-score'>{{rating.average}}</text>
</view>
</view>
</template>
区块模板