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


Posted in Javascript onNovember 03, 2018

前言

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

微信小程序使用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>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype Element学习笔记(篇二)
Oct 26 Javascript
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
jquery 防止表单重复提交代码
Jan 21 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 #Javascript
微信小程序实现笑脸评分功能
Nov 03 #Javascript
小程序实现五星点评效果
Nov 03 #Javascript
微信小程序实现星星评价效果
Nov 02 #Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 #Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 #Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 #Javascript
You might like
用文本作数据处理
2006/10/09 PHP
Apache2 httpd.conf 中文版
2006/12/06 PHP
PHP之数组学习
2011/05/29 PHP
PHP多进程编程实例
2014/10/15 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
教你安装python Django(图文)
2013/11/04 Python
Python标准库shutil用法实例详解
2018/08/13 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
python2.7实现邮件发送功能
2018/12/12 Python
Python OpenCV实现视频分帧
2019/06/01 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
药学专业学生的自我评价分享
2014/02/06 职场文书
教师求职自荐书
2014/06/14 职场文书
2014年个人售房协议书
2014/10/30 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
python如何做代码性能分析
2021/04/26 Python