微信小程序使用模板标签实现五星评分功能

前言

微信小程序的特点是“无需安装、无需卸载、触手可及、随时可达”，适合轻量级应用的快速开发。小程序模板的思想是其开发的核心思想，可以帮助开发人员减少大量重复的代码。让我们看看如何在小程序中实现市场上常用的评分组件，看看效果图：

创建模板

Wxml文件：

以模板为根节点，添加名称属性来区分不同的模板：

模板名称=' 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模型，横向排列五星。star-container { display : flex；flex-direction : row；}.stars { display: flexflex-direction : row；height: 17rpxmargin-right : 24 rpx；边距-top : 6rpx；}.星星图像{ padding-left : 3rpx；height: 17rpx宽度： 17 rpx；}.星级{ color: # 1f3463}模板使用

参考wxml模板：

导入src='http:/stars/stars-template.wxml' /！-最好使用这里引用的模板文件的相对路径-模板是=' stars template ' data=' { { stars : stars，score : average}}'/！- is指定要使用的模板的名称-引用wxss模板：

在与模板文件对应的wxss文件中输入以下表达式

@import./stars/stars-template . wxss '；

数据替换：

我看到在使用模板wxml文件时，有一个data=“{ { stars : star，score : average}}”属性和数据，表示指定模板的数据。一般从后台获取的评分数据是一个数字，比如3.5、4、5等。我们需要将这些数字转换成五个等级数组，以决定评分星显示哪些图片。这里，我们使用1。

函数converttostarsoray(stars){ var num=stars . tostring()。子串(0，1)；var数组=[]；for(var I=1；I=5；I){ if(I num){ array . push(1)；} else { array . push(0)；} }返回数组；} case wxml代码：

import src=' http : stars/stars-template . wxml '/view style=' margin 3360100 rpx ' template is=' starsTemplate ' data=' { { stars : stars，score : average } } '//视图基本在这里结束。我们的分数被转换成我们需要的分数数组，数据可以传递到使用模板的地方。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。