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

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.sythat.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}