微信小程序使用template标签实现五星评分功能
2018-11-22 11:26
1236 查看
前言
微信小程序特点“无须安装,无须卸载,触手可及,用完即走”,适合轻量级应用快速开发。小程序模版思想是它开发的核心思想,可以帮助开发者减少很多重复代码,我们来看看怎么在小程序中实现市面上常用的评分组件, 看看效果图:
创建模版
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>
到这里基本结束了,我们这评分转换成我们需要的评分数组,在使用模版的地方传入数据即可。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- [置顶] 微信小程序使用template标签实现五星评分
- 使用DeviceOne实现微信小程序功能
- 微信小程序实现笑脸评分功能
- 微信小程序使用picker实现时间和日期选择框功能【附源码下载】
- 微信小程序使用swiper实现侧滑功能
- 微信小程序-五星评分功能
- 微信小程序 五星评价功能的实现
- 使用微信小程序自定义组件实现的tabs选项卡功能
- 微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
- 微信小程序实现快递查询功能(界面传值、JSON数据请求和解析、radio-group的使用...)
- 使用node.js实现微信小程序实时聊天功能
- 微信小程序五星评分效果实现代码
- 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
- 微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
- 使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
- 微信小程序中使用ECharts 异步加载数据实现图表功能
- 微信小程序使用progress组件实现显示进度功能【附源码下载】
- 微信小程序 五星评分的实现实例
- 原创:微信小程序+WEB使用JS实现注册【60s】倒计时功能