微信小程序使用template标签实现五星评分

前言

微信小程序特点“无须安装，无须卸载，触手可及，用完即走”，适合轻量级应用快速开发。小程序模版思想是它开发的核心思想，可以帮助开发者减少很多重复代码，我们来看看怎么在小程序中实现市面上常用的评分组件, 看看效果图：

创建模版

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>

到这里基本结束了，我们这评分转换成我们需要的评分数组，在使用模版的地方传入数据即可。

微信小程序使用template标签实现五星评分相关推荐

微信小程序里面的标签和html标签的对比、微信小程序基础之常用控件
微信小程序和html5标签的区别: HTML5 微信小程序 <h1></h1>...<h6></h6> <p></p> < ...
微信小程序一些常用标签与html的对应关系
小程序中的常用标签也是就是我们常用的这些 view(视图容器).rich-text(富文本).swiper(滑块视图容器).icon(图标).text(文字).progress(进度条).button ...
微信小程序里面的标签和html标签做对比
一.微信小程序和html5标签的区别: 二.wxss 选择器 HTML5 微信小程序 div(标签选择器) view.text.icon.input.image.navigator(标签选择器) cl ...
微信可以识别哪些HTML语言,微信小程序一些常用标签与HTML的对应关系
参考地址: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/ 微信小程序中的常用标签: view(视图容器). ...
微信小程序开发template模板使用
在小程序开发过程中,一个项目需要在多处页面使用类似的模块,就需要创建模板减少代码量,同时提高代码复用度.小程序通过template 标签使用模板,template 标签的 is 属性与模板的 name ...
微信小程序：video标签默认显示视频的第一帧作为封面
微信小程序:video标签默认显示视频的第一帧作为封面 <video src="video_url"controls="{{false}}"initial ...
微信小程序隐藏video标签的进度条组件
微信小程序隐藏video标签的进度条组件直接上代码 <video direction="0" show-fullscreen-btn="{{false}}&quo ...
微信小程序使用template模板
首先简单的看一下文件结构: 第一步:新建一个template文件夹,里面新建一个template.wxml和template.wxss: template.wxml: <template nam ...
微信小程序的基础标签及使用(入门)
我们以前在html中使用的很多标签在微信小程序中都无法使用例如div,h1-h6,span等等. 当然在小程序中会出现很多的标签提供开发者使用: view:为块元素相对于以前我们所使用的的div te ...

微信小程序使用template标签实现五星评分

前言

创建模版

模版使用

微信小程序使用template标签实现五星评分相关推荐

最新文章

热门文章