微信小程序-五星评分

最新推荐文章于 2021-11-15 22:27:04 发布

Kaiccy

最新推荐文章于 2021-11-15 22:27:04 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：五星评分

本文链接：https://blog.youkuaiyun.com/Kaiccy/article/details/73619055

微信小程序专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个基于微信小程序的星级评分组件实现方法。该组件通过wxml和wcss定义了交互样式，并利用js实现了动态更新评分的功能。用户可以点击星星进行半颗或整颗星的选择，以实现精确到0.5的评分效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.wxml

<block wx:for="{{stars}}">
    <image class="star-image" src="{{key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">
        <view class="tag">
            <view class="item" data-key="{{item+0.5}}" bindtap="selectLeft"></view>
            <view class="item" data-key="{{item+1}}" bindtap="selectRight"></view>
        </view>
     </image>
</block>

.wcss

.star-image {
  width: 16px;
  height: 16px;
  margin-left: 30px;
  margin-top: 30px;
}

.item {
  float: left;
  width: 8px;
  height: 16px;
}

.tag {
    display:inline-block;
    position: absolute;
    top: 30px;
}

.js

var app = getApp()
Page({
    data: {
        stars: [0, 1, 2, 3, 4],
        normalSrc: '../../image/imgs/star.png',
        selectedSrc: '../../image/imgs/status.png',
        halfSrc: '../../image/icons/coin.png',
        key: 0,//评分
    },
    onLoad: function () {
    },
    //点击右边,半颗星
    selectLeft: function (e) {
        var key = e.currentTarget.dataset.key
        if (this.data.key == 0.5 && e.currentTarget.dataset.key == 0.5) {
            //只有一颗星的时候,再次点击,变为0颗
            key = 0;
        }
        console.log("得" + key + "分")
        this.setData({
            key: key
        })

    },
    //点击左边,整颗星
    selectRight: function (e) {
        var key = e.currentTarget.dataset.key
        console.log("得" + key + "分")
        this.setData({
            key: key
        })
    }
})