微信小程序使用template标签实现五星评分功能
更新时间：2018年11月03日 11:10:21 作者：T丶快乐知己丬
这篇文章主要为大家详细介绍了微信小程序使用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>
到这里基本结束了，我们这评分转换成我们需要的评分数组，在使用模版的地方传入数据即可。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
超越Jquery_01_isPlainObject分析与重构
isPlainObject是Jquery1.4后提供的新方法,用于判断对象是否是纯粹的对象（通过 {} 或者 new Object 创建的）。2010-10-10
这篇文章主要介绍了uniapp 封装组件的方法,结合实例形式分析了uniapp父级页与子页面组件封装与传参交互相关实现技巧,需要的朋友可以参考下2023-06-06
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
这篇文章主要介绍了项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)的相关资料,需要的朋友可以参考下2016-07-07
这篇文章主要介绍了使用Javascript写的2048小游戏的相关资料,需要的朋友可以参考下2015-11-11
这篇文章主要介绍了当前流行的JavaScript代码风格指南,同时推荐了一款风格检验工具jshint,可以配合大多数的编辑器统一团队代码风格,需要的朋友可以参考下2014-09-09
这篇文章主要介绍了d3.js 地铁轨道交通项目实战,本文通过实例代码项目截图给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-11-11
这篇文章主要介绍了JavaScript如何生成二维数组问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要为大家详细介绍了关于JavaScript数组三个并不那么常见的功能，你所不知道的事情，感兴趣的小伙伴们可以参考一下2016-08-08
javascript hashtable 修正版 hashtable hashset 下载,需要的朋友可以收藏下。2010-12-12
这篇文章主要介绍了使用mpvue搭建一个初始小程序及项目配置方法,需要的朋友可以参考下2018-12-12
最新评论