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}