微信小程序使用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 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
Vue 全局loading组件实例详解
May 29 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 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会员权限控制实现原理分析
2011/05/29 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
linux面试题参考答案(10)
2013/11/04 面试题
高中生毕业自我鉴定
2013/10/10 职场文书
环保倡议书50字
2014/05/15 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
李白故里导游词
2015/02/12 职场文书
档案管理员岗位职责
2015/02/12 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
Python闭包的定义和使用方法
2022/04/11 Python