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

自己写的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 >

*.wxss 文件

自己去写吧 !

来张效果图


身下的就需要骚年们自己动手试验了!祝你们成功!

猜你喜欢

转载自blog.csdn.net/jensen_yao/article/details/79413302
今日推荐