Home > Article > WeChat Applet > Example of WeChat Mini Program to achieve five-star rating
This article mainly introduces relevant information about implementation examples of WeChat Mini Program five-star rating. Here are implementation examples to help you implement the modified function. Friends in need can refer to
WeChat Mini Program Five-Star Rating
Five-star rating effect:
<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>
Here are zan-font-16,zan-c-red,zan-c- gray-dark is the style of ZanUI-WeApp.
My-ib here just sets the display to inline-block.
Page({ data: { star: 0, starMap: [ '非常差', '差', '一般', '好', '非常好', ], }, myStarChoose(e) { let star = parseInt(e.target.dataset.star) || 0; this.setData({ star: star, }); } });
The effect is as shown:
The above is the detailed content of Example of WeChat Mini Program to achieve five-star rating. For more information, please follow other related articles on the PHP Chinese website!