微信小程序 五星评分的实现实例
更新时间：2017年08月04日 10:34:51 投稿：lqh
这篇文章主要介绍了微信小程序 五星评分的实现实例的相关资料,这里提供实现实例帮助大家实现改功能，需要的朋友可以参考下
微信小程序 五星评分
五星级评分效果:
<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,
});
}
});
效果如图：
以上就是微信小程序 五星评分的实例，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
这篇文章主要介绍了微信小程序 Flex布局详解的相关资料,需要的朋友可以参考下2016-10-10
这篇文章主要介绍了JavaScript中中数组的相关知识,是JS入门学习中的基础知识,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了微信小程序template模板使用的相关资料,希望通过本文能帮助到大家，让大家理解掌握这样的功能，需要的朋友可以参考下2017-10-10
这篇文章主要为大家介绍了独立使用 umi 的核心插件模块示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了微信小程序request请求后台接口php的实例详解的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-09-09
JavaScript选择器函数querySelector和querySelectorAll
这篇文章主要介绍了 JavaScript选择器函数querySelector和querySelectorAll，下面文章围绕querySelector和querySelectorAll的相关资料展开详细内容,需要的朋友可以参考一下2021-11-11
网站上面有这种切换效果...2006-06-06
这篇文章主要分享的是如何利用js实现简单开关灯代码，下面文字围绕js实现简单开关灯的相关资料展开具体内容,需要的朋友可以参考以下，希望对大家又所帮助2021-11-11
这篇文章主要介绍了微信小程序 简单实例（阅读器）的实例开发的相关资料,需要的朋友可以参考下2016-09-09
Flutter刷新组件RefreshIndicator自定义样式demo
这篇文章主要介绍了Flutter刷新组件RefreshIndicator自定义样式demo,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
最新评论