微信小程序使用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 相关文章推荐
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
javascript学习之json入门
Dec 22 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
基于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
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
一个很不错的PHP翻页类
2009/06/01 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
php验证码生成器
2017/05/24 PHP
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
python socket 聊天室实例代码详解
2019/11/14 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
J2EE是技术还是平台还是框架
2016/08/14 面试题
精细化工应届生求职信
2013/11/17 职场文书
学生安全教育材料
2014/02/14 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
2014年司机工作总结
2014/11/21 职场文书
个人工作表现自我评价
2015/03/06 职场文书
推销搭讪开场白
2015/05/28 职场文书
会计专业自荐信范文
2019/05/22 职场文书
z-index不起作用
2021/03/31 HTML / CSS