微信小程序使用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 相关文章推荐
JavaScript 图片预览效果 推荐
Dec 22 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
vue里使用create, mounted调用方法
Apr 26 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
缓存技术详谈―php
2006/12/14 PHP
PHP STRING 陷阱原理说明
2010/07/24 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
JS的反射问题
2010/04/07 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
函授教育个人学习的自我评价
2013/12/31 职场文书
公司面试感谢信
2014/02/01 职场文书
捐资助学倡议书
2014/04/15 职场文书
工业设计专业自荐书
2014/06/05 职场文书
小学安全教育主题班会
2015/08/12 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android