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

自己写的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/gemmologist_expert_@2X.png', '../img/grade/gemmologist_ordinary_@2X.png', '../img/grade/gemmologist_senior_@2X.png', '../img/grade/gemmologist_star_@2X.png'],

kap: ["../img/grade/domestic_@2X.png", "../img/grade/international_@2X.png", "../img/grade/government_@2X.png"],

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/star01_@2X.png"></image>

        <image wx:elif="{{i === 1}}" src="../img/grade/halfStar01_@2X.png"></image>
    
        <image wx:else="{{i === 0}}" src="../img/grade/star_gray_@2X.png"></image>
    
    </view>

    <text>{{start}}</text>

    </view>

</template>

 

*.wxss 文件

 

自己去写吧 ！

来张效果图

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