[设为首页] [加入收藏]
关注我们:新浪微博腾讯微博

拓旁网,IT互联网学习的网站!

微信小程序实现星星评价效果
2018-11-08 23:59:58   来源:网络   评论:0 点击:

这篇文章主要为大家详细介绍了微信小程序实现星星评价效果,支持多个条目评价,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现星星评价效果的具体代码,供大家参考,具体内容如下
微信小程序实现星星评价效果

 

代码实现

wxml文件

  1.  
  2.  
  3.   
  4. class='container'
  5.  class='evaluate_contant'
  6.   
  7.   for='{{evaluate_contant}}' wx:key='' wx:for-index='idx'
  8.   class='evaluate_item'
  9.    class='evaluate_title'>{{item}} 
  10.   
  11.     
  12.    class='evaluate_box'
  13.     
  14.    for="{{stars}}" wx:key=''
  15.     class="star-image" style="left: {{item*80}}rpx" src="{{scores[idx] > item ?(scores[idx]-item == 0.5?halfSrc:selectedSrc) : normalSrc}}"
  16.     class="item" style="left:0rpx" data-score="{{item + 0.5}}" data-idx='{{idx}}' bindtap="selectLeft"
  17.     class="item" style="left:20rpx" data-score="{{item + 1}}" data-idx='{{idx}}' bindtap="selectRight"
  18.      
  19.     
  20.     
  21.   
  22.    
  23.    
  24.   class='submit_button' bindtap='submit_evaluate' type='primary'>提交 
  25.   
  26.  

js文件
 

  1.  
  2. Page({ 
  3.   
  4.  data: { 
  5.  evaluate_contant: ['评价条目一''评价条目二''评价条目三',], 
  6.  stars: [0, 1, 2, 3, 4], 
  7.  normalSrc: '../../images/no-star.png'
  8.  selectedSrc: '../../images/full-star.png'
  9.  halfSrc: '../../images/half-star.png'
  10.  score: 0, 
  11.  scores: [0, 0, 0], 
  12.  }, 
  13.   
  14.  // 提交事件 
  15.  submit_evaluate: function () { 
  16.  console.log('评价得分' + this.data.scores) 
  17.  }, 
  18.   
  19.  //点击左边,半颗星 
  20.  selectLeft: function (e) { 
  21.  var score = e.currentTarget.dataset.score 
  22.  if (this.data.score == 0.5 && e.currentTarget.dataset.score == 0.5) { 
  23.   score = 0; 
  24.  } 
  25.   
  26.  this.data.scores[e.currentTarget.dataset.idx] = score, 
  27.   this.setData({ 
  28.   scores: this.data.scores, 
  29.   score: score 
  30.   }) 
  31.   
  32.  }, 
  33.   
  34.  //点击右边,整颗星 
  35.  selectRight: function (e) { 
  36.  var score = e.currentTarget.dataset.score 
  37.   
  38.  this.data.scores[e.currentTarget.dataset.idx] = score, 
  39.   this.setData({ 
  40.   scores: this.data.scores, 
  41.   score: score 
  42.   }) 
  43.  } 
  44. }) 

wxss

  1.  
  2. /*评价区域 */ 
  3. .container .evaluate_contant .evaluate_item { 
  4.  font-size: 30rpx; 
  5.  color: gray; 
  6.  margin-left: 20rpx; 
  7.  margin-top: 30rpx; 
  8.   
  9. /*评价标题 */ 
  10. .container .evaluate_contant .evaluate_item .evaluate_title { 
  11.  display: inline-block; 
  12.   
  13. /*评价盒子 */ 
  14. .container .evaluate_contant .evaluate_item .evaluate_box { 
  15.  position: absolute; 
  16.  left: 220rpx; 
  17.  width: 100%; 
  18.  display: inline-block; 
  19.   
  20. /*星星评价的每个图片 */ 
  21. .container .evaluate_contant .evaluate_item .evaluate_box .star-image { 
  22.  position: absolute; 
  23.  width: 40rpx; 
  24.  height: 40rpx; 
  25.  src: "../../images/no-star.png"
  26.   
  27. /*星星的左边和右边区域<点击左边半个星星,点击右边整个星星> */ 
  28. .container .evaluate_contant .evaluate_item .evaluate_box .star-image .item { 
  29.  position: absolute; 
  30.  top: 0rpx; 
  31.  width: 20rpx; 
  32.  height: 40rpx; 
  33.   
  34. /*按钮 */ 
  35. .container .evaluate_contant .submit_button { 
  36.  height: 60rpx; 
  37.  font-size: 30rpx; 
  38.  line-height: 60rpx; 
  39.  margin: 20rpx; 

以上就是本文的全部内容,希望对大家的学习有所帮助

本文固定链接:
转载请注明:  发表于 拓旁网  2018-11-08 23:59:58

相关热词搜索:

上一篇:微信小程序使用template标签实现五星评分功能
下一篇:微信小程序http连接访问解决方案的示例

分享到: 收藏