這篇文章主要介紹了微信小程式五星評分的實現實例的相關資料,這裡提供實現實例幫助大家實現改功能,需要的朋友可以參考下
微信小程式五星評分
五星評分效果:
<view> <view class="zan-font-16 my-ib" bindtap="myStarChoose"> <block wx:for="{{starMap}}"> <text wx:if="{{star>=index+1}}" style="padding-right: .5em" class="zan-c-red" data-star="{{index+1}}">★</text> <text wx:if="{{star<index+1}}" style="padding-right: .5em" class="zan-c-gray-dark" data-star="{{index+1}}">☆</text> </block> </view> <!--★--> <text class="zan-c-gray-dark">{{starMap[star-1]}}</text> </view>
這裡的zan-font-16,zan-c-red,zan-c- gray-dark是ZanUI-WeApp的樣式。
這裡的my-ib只是將設定display為inline-block。
Page({ data: { star: 0, starMap: [ '非常差', '差', '一般', '好', '非常好', ], }, myStarChoose(e) { let star = parseInt(e.target.dataset.star) || 0; this.setData({ star: star, }); } });
效果如圖:
#以上是微信小程式之實現五星評分的範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!