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}