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

wxml文件:

    
      {{scoreContent}}
      
        
          
            
          
        
      
    

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}

你可能感兴趣的:(微信小程序,notepad++,小程序)