微信小程序使用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弹窗代码 可以指定弹出间隔
Jul 03 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
详解JavaScript原型与原型链
Nov 16 Javascript
react antd实现动态增减表单
Jun 03 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
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
php新建文件的方法实例
2019/09/26 PHP
求得div 下 img的src地址的js代码
2007/02/28 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
办公文员的工作岗位职责
2013/11/12 职场文书
环保倡议书范文
2014/05/12 职场文书
交通事故和解协议书
2014/09/25 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
售房协议书范本2014
2014/10/23 职场文书
2015年校长新年寄语
2014/12/08 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
Python可视化学习之seaborn调色盘
2022/02/24 Python
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers