wxhuanart/miniprogram/components/horbar/index.ts

// components/horbar/index.ts
Component({
  options: {
    multipleSlots: true,
    addGlobalClass: true,
  },
  /**
   * 组件的属性列表
   */
  properties: {
    items: {
      type: Array,
      value: [],
    },
    active: {
      type: Number,
      value: 0,
      observer(val: number) {
        this.setData({
          activeIndex: val,
        })
      },
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    activeIndex: 0,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onClick(e: WechatMiniprogram.TouchEvent<{}, {}, { idx: number }>) {
      const { idx } = e.currentTarget.dataset
      this.setData({
        activeIndex: idx,
      })
      this.triggerEvent('change', {
        idx,
        item: this.data.items[idx],
      })
    },
  },
})