介绍 & lt; view 类=& # 39;assess-star& # 39;比;
& lt;才能view 类=& # 39;star-wrap& # 39;比;
,,& lt; view 类=& # 39;star-item& # 39;,天气:为=皗{明星}},,天气:关键=啊?风格=& # 39;背景:url (“{{item.flag==1 ? item.lightImg: item.blackImg}}“), no-repeat 最高;background-size: 100%; & # 39;,材料指数=皗{指数}}“,bindtap=& # 39; starClick& # 39;祝辞& lt;/view>
& lt;才能/view>
& lt;才能view 类=& # 39;star-desc& # 39;在{{starDesc}} & lt;/view>
& lt;/view> .assess-star {
,margin-top: 20 rpx;
}
,
.star-wrap {
,宽度:50大众;
,保证金:10 rpx auto 10 rpx 汽车;
}
,
.star-item {
,显示:inline-block;
,高度:60 rpx;
,宽度:60 rpx;
,margin-right: 10 rpx;
}
,
.star-desc {
,字体大小:30 rpx;
,字体类型:PingFangSC-Regular;
,粗细:400;
,颜色:rgba (243,, 162,, 0, 1);
,text-align:中心;
} 页面({
,/* *
*,才能页面的初始数据
,*/,数据:{
starDesc才能:& # 39;非常满意,无可挑剔& # 39;,
,,明星:[{
,,,lightImg: & # 39; . ./. ./. ./. ./图像/xing.png& # 39;,
,,,blackImg: & # 39; . ./. ./. ./. ./图像/xing1.png& # 39;,
,,,标志:1,
,,,的信息:& # 39;非常不满意,各方面都很差& # 39;
,,},{
,,,lightImg: & # 39; . ./. ./. ./. ./图像/xing.png& # 39;,
,,,blackImg: & # 39; . ./. ./. ./. ./图像/xing1.png& # 39;,
,,,标志:1,
,,,的信息:& # 39;不满意,比较差& # 39;
,,},{
,,,lightImg: & # 39; . ./. ./. ./. ./图像/xing.png& # 39;,
,,,blackImg: & # 39; . ./. ./. ./. ./图像/xing1.png& # 39;,
,,,标志:1,
,,,的信息:& # 39;一般,还要改善& # 39;
,,},{
,,,lightImg: & # 39; . ./. ./. ./. ./图像/xing.png& # 39;,
,,,blackImg: & # 39; . ./. ./. ./. ./图像/xing1.png& # 39;,
,,,标志:1,
,,,的信息:& # 39;比较满意,仍要改善& # 39;
,,},{
,,,lightImg: & # 39; . ./. ./. ./. ./图像/xing.png& # 39;,
,,,blackImg: & # 39; . ./. ./. ./. ./图像/xing1.png& # 39;,
,,,标志:1,
,,,的信息:& # 39;非常完美,无可挑剔& # 39;
})才能
},
,//选择评价星星
,starClick:函数(e), {
var 才能;that =,;
for 才能;(var 小姐:=,0;,小姐:& lt;, that.data.stars.length;,我+ +),{
,,var allItem =, & # 39;恒星[& # 39;,+,小姐:+,& # 39;].flag& # 39;;
,,that.setData ({
,,,(allItem): 2
,,})
,,}
var 才能;index =, e.currentTarget.dataset.index;
for 才能;(var 小姐:=,0;,小姐:& lt;=,指数;,我+ +),{
,,var item =, & # 39;恒星[& # 39;,+,小姐:+,& # 39;].flag& # 39;;
,,that.setData ({
,,,(项):1
,,})
,,}
this.setData({才能
,,,starDesc: this.data.stars .message(指数)
})才能
},/* *
*,才能生命周期函数——监听页面加载
,*/,onLoad:功能(选项),{
,
},
,/* *
*,才能生命周期函数——监听页面初次渲染完成
,*/,onReady:函数(),{
,
},
,/* *
*,才能生命周期函数——监听页面显示
,*/,昂秀:函数(),{
,
},
,/* *
*,才能生命周期函数——监听页面隐藏
,*/,onHide:函数(),{
,
},
,/* *
*,才能生命周期函数——监听页面卸载
,*/onUnload:大敌;函数(),{
,
},
,/* *
*,才能页面相关事件处理函数——监听用户下拉动作
,*/,onPullDownRefresh:函数(),{
,
},
,/* *
*,才能页面上拉触底事件的处理函数
,*/,onReachBottom:函数(),{
,
},
,/* *
*,才能用户点击右上角分享
,*/,onShareAppMessage:函数(),{
,
,}
})
本篇文章给大家分享的是有关怎么在微信小程序中实现一个星级评价功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
wxml
wxs
js
以上就是怎么在微信小程序中实现一个星级评价功能,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。
