[设为首页] [加入收藏]
关注我们:新浪微博腾讯微博

拓旁网,IT互联网学习的网站!

微信小程序使用template标签实现五星评分功能
2018-11-08 23:26:00   来源:   评论:0 点击:

这篇文章主要为大家详细介绍了微信小程序使用template标签实现五星评分功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
前言

微信小程序特点“无须安装,无须卸载,触手可及,用完即走”,适合轻量级应用快速开发。小程序模版思想是它开发的核心思想,可以帮助开发者减少很多重复代码,我们来看看怎么在小程序中实现市面上常用的评分组件, 看看效果图:

微信小程序使用template标签实现五星评分功能

创建模版

wxml文件:以

这里我们采用小程序推荐使用flex模型,横向排列五颗星星图片。

  1.  
  2. .stars-container { 
  3.  display: flex; 
  4.  flex-direction: row; 
  5. .stars { 
  6.  display: flex; 
  7.  flex-direction: row; 
  8.  height: 17rpx; 
  9.  margin-right: 24rpx; 
  10.  margin-top: 6rpx; 
  11. .stars image { 
  12.  padding-left: 3rpx; 
  13.  height: 17rpx; 
  14.  width: 17rpx; 
  15. .star-score { 
  16.  color: #1f3463; 
  17.  


模版使用

引用wxml模版:

  1.  
  2. <import src="../stars/stars-template.wxml" />  
  1.  
  2. "starsTemplate" data="{{stars:stars,score:average}}" />  

引用wxss模版:

在使用模版文件对应的wxss文件中输入以下表达式即可

@import "../stars/stars-template.wxss";

数据装换:

我看到在使用模版wxml文件时有个data=“{{stars:stars,score:average}}”属性和数据,表示指定模版的数据,我们一般从后台获取的评分数据一般都是一个数字,比如:3.5,4,5等等,我们需要把这些数字转换成五个等级数组,决定评分星星显示什么图片,这里我们用1表示显示高亮的,0表示灰色星星,我们也可以在一个2表示半颗高亮的星星表示0.5的评分:

  1.  
  2. function convertToStarsArray(stars) { 
  3.  var num = stars.toString().substring(0, 1); 
  4.  var array = []; 
  5.  for (var i = 1; i <= 5; i++) { 
  6.   if (i < num) { 
  7.    array.push(1); 
  8.   } else { 
  9.    array.push(0); 
  10.   } 
  11.  } 
  12.  return array; 

案例wxml代码:

  1.  
  2. <import src="stars/stars-template.wxml" /> 
  3. 'margin:100rpx'
  4.  "starsTemplate" data="{{stars:stars,score:average}}" /> 
  5.  

到这里基本结束了,我们这评分转换成我们需要的评分数组,在使用模版的地方传入数据即可。

本文固定链接:
转载请注明:  发表于 拓旁网  2018-11-08 23:26:00

相关热词搜索:

上一篇:JavaScript实现点击单元格改变背景色的方法 js脚本技术专辑系列
下一篇:最后一页

分享到: 收藏