wxml
<view> <view> <view wx:for="{{stars}}" wx:key="" data-index="{{index}}" bindtap='starClick'></view> </view> <view>{{starDesc}}</view> </view>
wxss
.assess-star { margin-top: 20rpx; } .star-wrap { width: 50vw; margin: 10rpx auto 10rpx auto; } .star-item { display: inline-block; height: 60rpx; width: 60rpx; margin-right: 10rpx; } .star-desc { font-size: 30rpx; font-family: PingFangSC-Regular; font-weight: 400; color: rgba(243, 162, 0, 1); text-align: center; }
js
Page({ /** * 页面的初始数据 */ data: { starDesc: '非常满意，无可挑剔', stars: [{ lightImg: '../../../../images/xing.png', blackImg: '../../../../images/xing1.png', flag: 1, message: '非常不满意，各方面都很差' }, { lightImg: '../../../../images/xing.png', blackImg: '../../../../images/xing1.png', flag: 1, message: '不满意，比较差' }, { lightImg: '../../../../images/xing.png', blackImg: '../../../../images/xing1.png', flag: 1, message: '一般，还要改善' }, { lightImg: '../../../../images/xing.png', blackImg: '../../../../images/xing1.png', flag: 1, message: '比较满意，仍要改善' }, { lightImg: '../../../../images/xing.png', blackImg: '../../../../images/xing1.png', flag: 1, message: '非常完美，无可挑剔' }] }, // 选择评价星星 starClick: function(e) { var that = this; for (var i = 0; i < that.data.stars.length; i++) { var allItem = 'stars[' + i + '].flag'; that.setData({ [allItem]: 2 }) } var index = e.currentTarget.dataset.index; for (var i = 0; i <= index; i++) { var item = 'stars[' + i + '].flag'; that.setData({ [item]: 1 }) } this.setData({ starDesc: this.data.stars[index].message }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function() { }, /** * 生命周期函数--监听页面显示 */ onShow: function() { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function() { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { }, /** * 用户点击右上角分享 */ onShareAppMessage: function() { } })