微信小程序使用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 相关文章推荐
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
es6函数之rest参数用法实例分析
Apr 18 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
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
详解vue axios中文文档
2017/09/12 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
python3实现磁盘空间监控
2018/06/21 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
Python tkinter常用操作代码实例
2020/01/03 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
建筑安全员岗位职责
2015/02/15 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
光荣之路观后感
2015/06/12 职场文书
教研活动主持词
2015/07/03 职场文书
学习心得体会
2019/06/20 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers