微信小程序使用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 相关文章推荐
javascript实现的DES加密示例
Oct 30 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
JS document对象简单用法完整示例
Jan 14 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 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
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
php上传图片类及用法示例
2016/05/11 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
JS与C#编码解码
2013/12/03 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
Python面向对象之继承代码详解
2018/01/29 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
详解Python中的type和object
2018/08/15 Python
浅析python的优势和不足之处
2018/11/20 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
九州传奇上机题
2014/07/10 面试题
霸王洗发水广告词
2014/03/14 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
工程款申请报告
2015/05/15 职场文书
工作感想范文
2015/08/07 职场文书
Golang 入门 之url 包
2022/05/04 Golang