微信小程序使用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 DOM学习第一章 W3C DOM简介
Feb 19 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
Node.js返回JSONP详解
May 18 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
JavaScript实现轮播图特效
Apr 10 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 Javascript
深入浅析React中diff算法
May 19 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+mysql写的留言本
2006/10/09 PHP
由php if 想到的些问题
2008/03/22 PHP
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
python 字符串和整数的转换方法
2018/06/25 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
eclipse创建python项目步骤详解
2019/05/10 Python
python获取Pandas列名的几种方法
2019/08/07 Python
Python3 合并二叉树的实现
2019/09/30 Python
python numpy数组复制使用实例解析
2020/01/10 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
golang/python实现归并排序实例代码
2020/08/30 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
西安交大自主招生自荐信
2014/01/27 职场文书
公务员综合考察材料
2014/02/01 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
四议两公开实施方案
2014/03/28 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
博物馆观后感
2015/06/05 职场文书
订货会主持词
2015/07/01 职场文书
会议室使用管理制度
2015/08/06 职场文书
《确定位置》教学反思
2016/02/18 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL