小程序评分组件

本文链接：https://blog.csdn.net/yeshennet/article/details/79031668

发现小程序的文档很全，自定义组件也挺简单的
（PS：一直觉得小程序的框架和VUE的框架很像）

分享一个评分组件，效果大概是这样的：

这里写图片描述

Component({
  options: {
    multipleSlots: false
  },
  data: {
    mark: 0,
    range:[1,2,3,4,5]
  },
  properties: {
    mark: {
      type: Number,
      value: '',
      observer: 'update'
    }
  },
  methods: {
    update: function (newVal, oldVal) {
      this.setData({
        mark:newVal
      })
    },
    tapMark(e) {
      let mark = parseInt(e.target.dataset.mark) || 0;
      if(mark > 0){
        this.setData({
          mark: mark
        });
        this.triggerEvent('markChange', { mark:mark}, {})
      }
    }
  }
})

wxml

<view class='mark-like' bindtap='tapMark' >
  <block wx:for="{{range}}" wx:key='index'>
      <image wx:if="{{mark>=index+1}}" 
          src='/image/mark_like.png'
          data-mark="{{index+1}}"></image>
      <image wx:if="{{mark<index+1}}" 
          src='/image/mark_unlike.png'
          data-mark="{{index+1}}"></image>
  </block>
</view>

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《小程序评分组件》