发现小程序的文档很全,自定义组件也挺简单的
(PS:一直觉得小程序的框架和VUE的框架很像)

分享一个评分组件,效果大概是这样的:

这里写图片描述

js

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>
Logo

前往低代码交流专区

更多推荐