当前位置：首页 > article >正文

微信小程序实现【点击滑动评分评星（5星）】功能

article 2025/2/2 8:33:39

wxml文件：

    <view class="wxpl_xing">
      <view class="manyidu">{{scoreContent}}</view>
      <view>
        <block wx:for='{{scoreArray}}' wx:for-item="item">
          <view class='starLen' bindtap='changeScore' data-sy="{{index}}">
            <image class='star' src="{{score>index?fullStarUrl:nullStarUrl}}" />
          </view>
        </block>
      </view>
    </view>

js文件：

Page({
  data: {
    bsm: '', //标识码
    fullStarUrl: '../../images/fullStar.png', //满星图片
    nullStarUrl: '../../images/nullStar.png', //空星图片
    score: 0, //评价分数
    scoreArray: [0, 1, 2, 3, 4, 5], //5.非常满意,4.满意,3.比较满意,2.一般,1.不满意,0.非常不满意
    scoreText: ['非常不满意', '不满意', '一般', '比较满意', '满意', '非常满意'], //评分列表
    scoreContent: '' //文字显示评分情况
  },
  changeScore: function (e) {
    var that = this;
    var wxsy = e.currentTarget.dataset.sy
    that.setData({
      score: wxsy+1,
      scoreContent: that.data.scoreText[wxsy]
    }) 
  },
})

wxss文件：

.wxpl_xing{ position: fixed; background: #fff; height:240px; bottom: 0px; width: 100%; z-index: 11; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.manyidu{ font-size:28rpx; padding-bottom: 30rpx; height: 40rpx; line-height: 40rpx;}
.starLen{margin-right:10px;display:inline-block}
.star{width:30px;height:30px;vertical-align:text-bottom;display:inline-block}
.scoreContent{margin-left:100px;display:inline-block}