微信小程序使用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 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
php跨域调用json的例子
Nov 13 Javascript
javascript判断office版本示例
Apr 11 Javascript
javascript实现控制div颜色
Jul 07 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
vue实例的选项总结
Jun 09 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
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
浅谈php的优缺点
2015/07/14 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
python 图片验证码代码
2008/12/07 Python
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
python计算N天之后日期的方法
2015/03/31 Python
python如何通过protobuf实现rpc
2016/03/06 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
中学老师的自我评价
2013/11/07 职场文书
优秀语文教师事迹
2014/05/18 职场文书