微信小程序使用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对象属性方法汇总
Nov 21 Javascript
JavaScript函数获取事件源的小例子
May 14 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
Vue scoped及deep使用方法解析
Aug 01 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 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获取中英混合字符串长度的方法
2014/06/07 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
基于python编写的微博应用
2014/10/17 Python
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
python实现顺序表的简单代码
2018/09/28 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
Python编写打字训练小程序
2019/09/26 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
python多进程使用函数封装实例
2020/05/02 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
老师自我鉴定范文
2013/12/25 职场文书
义卖募捐活动总结
2015/05/09 职场文书
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA
青岛市的收音机研制与生产
2022/04/07 无线电