前言
微信小程序特点 "无须安装, 无须卸载, 触手可及, 用完即走", 适合轻量级应用快速开发. 小程序模版思想是它开发的核心思想, 可以帮助开发者减少很多重复代码, 我们来看看怎么在小程序中实现市面上常用的评分组件, 看看效果图:
创建模版
wxml 文件:
以 < template > 为根节点, 添加 name 属性用来区分不同模版:
- <template name="starsTemplate">
- <view class='stars-container'>
- <view class='stars'>
- <block wx:for="{{stars}}" wx:for-item="i" wx:key="position">
- <image wx:if="{{i}}" src='/images/icon/star.png'></image>
- <!-- <image wx:elif="{{i==2}}" src='/images/icon/none-star.png'></image> -->
- <image wx:else src='/images/icon/none-star.png'></image>
- </block>
- </view>
- <text class='star-score'>{{score}}</text>
- </view>
- </template>
wxss 文件:
这里我们采用小程序推荐使用 flex 模型, 横向排列五颗星星图片.
- .stars-container {
- display: flex;
- flex-direction: row;
- }
- .stars {
- display: flex;
- flex-direction: row;
- height: 17rpx;
- margin-right: 24rpx;
- margin-top: 6rpx;
- }
- .stars image {
- padding-left: 3rpx;
- height: 17rpx;
- width: 17rpx;
- }
- .star-score {
- color: #1f3463;
- }
模版使用
引用 wxml 模版:
- <import src="../stars/stars-template.wxml" />
- <!-- 这里引用模板文件最好使用相对路径 -->
- <template is="starsTemplate" data="{{stars:stars,score:average}}" />
- <!--is 指定使用模版的名称 -->
引用 wxss 模版:
在使用模版文件对应的 wxss 文件中输入以下表达式即可
@import "../stars/stars-template.wxss";
数据装换:
我看到在使用模版 wxml 文件时有个 data="{{stars:stars,score:average}}" 属性和数据, 表示指定模版的数据, 我们一般从后台获取的评分数据一般都是一个数字, 比如: 3.5,4,5 等等, 我们需要把这些数字转换成五个等级数组, 决定评分星星显示什么图片, 这里我们用 1 表示显示高亮的, 0 表示灰色星星, 我们也可以在一个 2 表示半颗高亮的星星表示 0.5 的评分:
- function convertToStarsArray(stars) {
- var num = stars.toString().substring(0, 1);
- var array = [];
- for (var i = 1; i <= 5; i++) {
- if (i <num) {
- array.push(1);
- } else {
- array.push(0);
- }
- }
- return array;
- }
案例 wxml 代码:
- <import src="stars/stars-template.wxml" />
- <view style='margin:100rpx'>
- <template is="starsTemplate" data="{{stars:stars,score:average}}" />
- </view>
到这里基本结束了, 我们这评分转换成我们需要的评分数组, 在使用模版的地方传入数据即可.
来源: https://www.jb51.net/article/150094.htm