微信小程序實現評價功能
本文實例為大傢分享瞭微信小程序實現評價的具體代碼，供大傢參考，具體內容如下
首先去圖標庫，找一個空心星圖片和一個實星圖片
先是效果圖
代碼
wxml文件
for循環5次，初始值是5星，data-name用於區別是那個評價的星星
src="{{item-total+1>0?’…/image/empty_stars.png’:’…/image/entity_stars.png’}}"
條件判斷，圖片判斷一個是空星，一個實星，根據自己圖片地址改變
<view class="view_page">
<view class="content_cls">
<view class="cross_column" style="margin-top: 50rpx;">
<label>總體評價：</label>
<image class="imagecls" wx:for="{{5}}" wx:key="{{index}}" data-name="total" data-item="{{item}}" src="{{item-total+1>0?'../image/empty_stars.png':'../image/entity_stars.png'}}" bindtap="img_bind"></image>
</view>
<view class="cross_column">
<label>服務態度：</label>
<image class="imagecls" wx:for="{{5}}" wx:key="{{index}}" data-name="service" data-item="{{item}}" src="{{item-service+1>0?'../image/empty_stars.png':'../image/entity_stars.png'}}" bindtap="img_bind"></image>
</view>
<view class="cross_column">
<label>施工質量：</label>
<image class="imagecls" wx:for="{{5}}" wx:key="{{index}}" data-name="quality" data-item="{{item}}" src="{{item-quality+1>0?'../image/empty_stars.png':'../image/entity_stars.png'}}" bindtap="img_bind"></image>
</view>
<view class="cross_column">
<label>維修時間：</label>
<image class="imagecls" wx:for="{{5}}" wx:key="{{index}}" data-name="repairtime" data-item="{{item}}" src="{{item-repairtime+1>0?'../image/empty_stars.png':'../image/entity_stars.png'}}" bindtap="img_bind"></image>
</view>
<view class="cross_column" style="height:120rpx;margin-top:200rpx;margin-button:10rpx">
<button bindtap="Reasons_bind" class="but_style">需要返修</button>
<button class="but_style">確認評價</button>
</view>
</view>
</view>
css樣式
如果需要實現我這種效果可以使用
/* pages/browse/evaluatepage.wxss */
/* 列合並 */
.cross_column {
display: flex;
height: 70rpx;
line-height: 70rpx;
}
/* img圖片樣式 */
.imagecls {
width: 70rpx;
height: 70rpx;
}
/*按鈕樣式 */
.but_style {
background-color: #f2a8b9;
width: 200rpx;
height: 100rpx;
color: white;
}
/*報修評價內容樣式 */
.content_cls {
width: 70%;
margin-left: 15%;
background-color: white;
}
.content_cls view{
margin-bottom: 50rpx;
}
最後就是js
先是初始化評價都為5星
點擊星星觸發事件，獲取item和name.根據name判斷賦值
本來打算一個setData實現的，但是沒整出來，有整出來的朋友可以附下代碼
data: {
total: 5,//總體評價
service: 5,//服務態度
quality: 5,//施工質量
repairtime: 5//維修時間
},
img_bind: function(event) {
var id = event.currentTarget.dataset.item + 1;
var variable = event.currentTarget.dataset.name;
console.log(id)
console.log(variable)
if (variable == "total")
this.setData({
total: id,
})
else if (variable == "service")
this.setData({
service: id,
})
else if (variable == "quality")
this.setData({
quality: id,
})
else
{
this.setData({
repairtime: id,
})
}
},
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。