微信小程序之五星评分效果

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

自己写的Demo 数据是自己模拟的希望下面的内容能够对大家有所帮助，不喜勿喷！

下面上代码

date 数据格式：

var dateList = [
 {
 userId: 0,
 name: '王隔壁',
 nameurl: '../img/user-1.png',
 jdtype: 0,
 bqurl: [1, 2, 3, 4],
 money: 199,
 startarr: [2, 2, 2, 2, 2],
 start:5,
 zyurl: '1,2,3',
 orderid: '001'
 },
 {
 userId: 1,
 name: '李Lisa',
 nameurl: '../img/user-2.png',
 jdtype: 1,
 bqurl: [1, 2],
 money: 50,
 startarr: [2, 2, 2, 1, 0],
 start: 3.5,
 zyurl: '1',
 orderid: '001'
 },
 {
 userId: 2,
 name: '良辰',
 nameurl: '../img/user-3.png',
 jdtype: 3,
 bqurl: [1, 2, 4],
 money: 80,
 startarr: [2,2,2,2,1],
 start: 4.5,
 zyurl: '2,3',
 orderid: '001'
 },
 {
 userId: 3,
 name: '吉日',
 nameurl: '../img/user-4.png',
 jdtype: 2,
 bqurl: [3],
 money: 100,
 startarr: [2, 0, 0, 0, 0],
 start: 2,
 zyurl: '1,2,3,4',
 orderid: '001'
 },
 {
 userId: 4,
 name: '大王',
 nameurl: '../img/user-5.png',
 jdtype: 2,
 bqurl: [1,2,3,4],
 money: 99,
 startarr: [2, 1, 0, 0, 0],
 start: 1.5,
 zyurl: '1,2',
 orderid:'001'
 }
]

module.exports = {
 dateList: dateList //暴露给外部，不然不能获取
}

js文件

var dateList = require("../data/date.js"); //引入data.js

Page({

 /**
 * 页面的初始数据
 */
 data: {
 dataList:'',
 titleurl: ['../img/grade/[email protected]', '../img/grade/[email protected]', '../img/grade/[email protected]', '../img/grade/[email protected]'],
 kap: ["../img/grade/[email protected]", "../img/grade/[email protected]", "../img/grade/[email protected]"],
 kapIndex:[],
 stars:[]
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 var kapind = dateList.dateList;
 var arr = [];
 for(var i=0;i<kapind.length;i++){
 arr.push(kapind[i].start);
 }
 this.setData({
 dataList: dateList.dateList,
 stars: arr
 });

})

*.wxml 文件

我这里把这个文件做成了模板

<template name="starsTp">
 <view class='uesr-stre'>
 <!-- <text>{{startarr}}</text> -->
 <view class="start" wx:for="{{startarr}}" wx:for-item="i" wx:key="k">
 <image wx:if="{{i === 2}}" src="../img/grade/[email protected]"></image>
 <image wx:elif="{{i === 1}}" src="../img/grade/[email protected]"></image>
 <image wx:else="{{i === 0}}" src="../img/grade/[email protected]"></image>
 </view>
 <text>{{start}}</text>
 </view>

</template>