微信小程序實現評價功能
本文實例為大傢分享瞭微信小程序實現評價的具體代碼,供大傢參考,具體內容如下
首先去圖標庫,找一個空心星圖片和一個實星圖片
先是效果圖
代碼
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。