脚本宝典收集整理的这篇文章主要介绍了

微信小程序星级评分和展示

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

正文:用户点击第几颗星星就显示为几星评分

wxml文件代码

<view class='assess_sec_img'>
    <block wx:for="{{empty_star}}" wx:key="index">
        <image catchtap='in_xin' id='{{index+1}}' data-in='use_sc2' src='../../img/star_img.png' class='assess_star_img'></image>
    </block>
    <block wx:for="{{full_star}}" wx:key="index">
        <image catchtap='in_xin' id='{{index+1}}' data-in='use_sc' src='../../img/star_imgs.png' class='assess_star_img'></image>
    </block>
</view>

wxss文件代码

.assess_sec .assess_sec_star .assess_sec_img{
    width: 530rpx;
    height: 160rpx;
    display: flex;
    align-items: center;
    float: left;
}

.assess_sec .assess_sec_star .assess_sec_img .assess_star_img{
    width: 47rpx;
    height: 46rpx;
    float: left;
    margin: 0 10rpx; 
}

js文件代码

Page({

    /**
     * 页面的初始数据
     */
    data: {
        empty_star: 0,         //未选择星星
        full_star: 5           //已选择星星
    },

    // 用户给评分
      in_xin: function(e) {
        var that = this;
        console.log(e);
        var in_xin = e.currentTarget.dataset.in;
        var empty_star;
        if (in_xin === 'use_sc2') {
            empty_star = Number(e.currentTarget.id) - 1;
            console.log(empty_star);
        } else {
            empty_star = Number(e.currentTarget.id) + that.data.empty_star;
            console.log(empty_star);
        }
        this.setData({
            empty_star: empty_star,
            full_star: 5 - empty_star
        })
    },

})

原文链接:https://blog.csdn.net/qq_3571...

总结

以上是脚本宝典为你收集整理的

微信小程序星级评分和展示

全部内容,希望文章能够帮你解决

微信小程序星级评分和展示

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过