微信小程序使用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 10 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 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设计模式之调解者模式的深入解析
2013/06/13 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
JS中数组重排序方法
2016/11/11 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
Python2与Python3的区别实例分析
2019/04/11 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
学生发电厂实习自我鉴定
2013/09/22 职场文书
应届生个人求职信模板
2013/11/26 职场文书
缓刑人员的思想汇报
2014/01/11 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
2014年团队工作总结
2014/11/24 职场文书
小马王观后感
2015/06/11 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python
redis复制有可能碰到的问题汇总
2022/04/03 Redis
Python数组变形的几种实现方法
2022/05/30 Python
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android