时间:2021-05-18
微信小程序 五星评分
五星级评分效果:
<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, }); }});效果如图:
以上就是微信小程序 五星评分的实例,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了微信小程序实现的五星评价功能。分享给大家供大家参考,具体如下:实现五星评价功能,效果图如下:.wxml文件:1、品质效果{{startext[0]
微信小程序五星评分一位同学说要写五星评分.要有半颗星的评分.于是我做了个玩具.有空了做模块化,这代码看不下去了.代码:1.index.wxml2.index.w
微信小程序五星评价功能话不多说,我们来看一下效果图:要实现的效果:点击到第几颗星,就要显示到第几颗星,接下来直接查看源码:满意度: css如下:.l-eval
在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo五角星评分案例*{padding:0;margin:0;}.comment{f
这篇文章主要介绍了微信小程序如何实现五星评价功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下效果要实现的效