微信小程序 五星评分的实现实例
程序员文章站
2022-11-25 10:49:52
微信小程序 五星评分
五星级评分效果:
微信小程序 五星评分
五星级评分效果:
<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, }); } });
效果如图:
以上就是微信小程序 五星评分的实例,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
上一篇: jQuery初级教程之网站品牌列表效果
下一篇: Node.js 的模块知识汇总