微信小程序使用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 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
js实现图片放大展示效果
Aug 30 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 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中目录,文件操作详谈
2007/03/19 PHP
php实现网页端验证码功能
2017/07/11 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
深入认识javascript中的eval函数
2009/11/02 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
python基础教程之Filter使用方法
2017/01/17 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
Linux内核产生并发的原因
2016/11/08 面试题
后勤人员自我鉴定
2013/10/20 职场文书
高三学生评语大全
2014/04/25 职场文书
2015年话务员工作总结
2015/04/29 职场文书
经营场所证明范本
2015/06/19 职场文书
田径运动会通讯稿
2015/07/18 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL