微信小程序使用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限制textarea每行输入字符串长度的代码
Oct 31 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
js 求时间差的实现代码
Apr 26 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
php中定义网站根目录的常用方法
2010/08/08 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
python将人民币转换大写的脚本代码
2013/02/10 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
Python 常用string函数详解
2016/05/30 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
Pyqt5自适应布局实例
2019/12/13 Python
python进度条显示之tqmd模块
2020/08/22 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
过滤器的用法
2013/10/08 面试题
九年级英语教学反思
2014/01/31 职场文书
学生党支部先进事迹
2014/02/04 职场文书
揠苗助长教学反思
2014/02/04 职场文书
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
Sql Server之数据类型详解
2022/02/28 SQL Server
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL
SQL SERVER中的流程控制语句
2022/05/25 SQL Server