脚本之家

微信小程序五星级评分效果

上一篇
微信小程序组件wxParse中的模版template使用方法
下一篇
小程序开发必备!WeUI 发布 微信官方UI库

微信小程序五星级评分效果是在点餐、服务评价这些小程序里经常会使用到的功能,今天分享一个关于微信小程序五星级评分效果代码,希望对你开发微信小程序有所帮助!

效果如图:

wxml

<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

js

Page({
    data: {
        star: 0,
        starMap: [
            '非常差',
            '差',
            '一般',
            '好',
            '非常好',
        ],
    },
    myStarChoose(e) {
        let star = parseInt(e.target.dataset.star) || 0;
        this.setData({
            star: star,
        });
    }
});


以上就是微信小程序五星级评分效果的全部内容,希望这篇技术文档对大家的学习有所帮助,转发给身边的程序猿朋友,感谢各位大大支持:脚本之家 jb51.cc

微信小程序五星级评分效果 由脚本之家 jb51.cc 收集整理
本文版权归原作者所有,转载请注明出处并带上本文链接!

上一篇
微信小程序组件wxParse中的模版template使用方法
下一篇
小程序开发必备!WeUI 发布 微信官方UI库

您可能感兴趣的小程序组件教程

小程序组件

微信小程序中使用redux

当然小程序中使用redux不是必须的,如果你的程序逻辑不是很复杂,无需用这个东西,redux就是管理全局状态的,如果你刚好很熟悉redux,并且很有必要使用这东西的话,那就非常好可以使用,作者集成插件到微信小程序中的