微信小程序使用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中Array 对象相关的几个方法
Dec 22 Javascript
javascript:void(0)的真正含义实例分析
Aug 20 Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
浅析JavaScript动画
Jun 10 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
微信小程序实现星星评分效果
Nov 01 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
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
php 中文和编码判断代码
2010/05/16 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
JQuery与iframe交互实现代码
2009/12/24 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
13个PHP函数超实用
2015/10/21 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
详解用python写一个抽奖程序
2019/05/10 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
实习生体会的自我评价范文
2013/11/28 职场文书
银行服务感言
2014/03/01 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
小学亲子活动总结
2014/07/01 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
2015年元旦标语大全
2014/12/09 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript