• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [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>

*.wxss 文件

自己去写吧 !

来张效果图


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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
从微信小程序到鸿蒙js开发【15】——JS调用Java发布时间:2022-07-18
下一篇:
Taro3.x小程序导航栏高度等精确数据的hooks发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap