微信小程序 五星评分的实现实例
2017-08-04 10:34
816 查看
微信小程序 五星评分
五星级评分效果:
<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, }); } });
效果如图:
以上就是微信小程序 五星评分的实例,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
您可能感兴趣的文章:
相关文章推荐
- 微信小程序使用template标签实现五星评分功能
- 微信小程序五星评分效果实现代码
- 微信小程序 定位到当前城市实现实例代码
- 微信小程序如何开发?五星评分效果教程
- 微信小程序电商常用倒计时实现实例
- 微信小程序开发之五星评分
- 微信小程序实现给循环列表添加点击样式实例
- 微信小程序 实现列表刷新的实例详解
- 微信小程序图片选择、上传到服务器、预览(PHP)实现实例
- 转:【微信小程序】实现锚点定位楼层跳跃的实例
- 微信小程序 实现tabs选项卡效果实例代码
- [置顶] 微信小程序实现tabs选项卡效果简单代码实例
- 微信小程序 利用css实现遮罩效果实例详解
- 微信小程序实现星级评分和展示
- 微信小程序实现之手势锁功能实例代码
- 微信小程序之五星评分效果
- 微信小程序 scroll-view实现上拉加载与下拉刷新的实例
- 微信小程序实现各种特效实例
- 微信小程序开发之五星评分