tt-mp/src/index-item/index.js

一套组件化、可复用、易扩展的头条小程序 UI 组件库

import baseComponent from '../helpers/baseComponent'
import classNames from '../helpers/classNames'

baseComponent({
  relations: {
    '../index/index': {
      type: 'parent',
    },
  },
  properties: {
    prefixCls: {
      type: String,
      value: 'wux-index-item',
    },
    name: {
      type: String,
      value: '',
    },
  },
  data: {
    index: 0,
    top: 0,
    height: 0,
  },
  computed: {
    classes: [
      'prefixCls',
      function (prefixCls) {
        const wrap = classNames(prefixCls)
        const hd = `${prefixCls}__hd`
        const bd = `${prefixCls}__bd`

        return {
          wrap,
          hd,
          bd,
        }
      },
    ],
  },
  methods: {
    updated(index) {
      const className = `.${this.data.prefixCls}`
      wx.createSelectorQuery()
        .in(this)
        .select(className)
        .boundingClientRect((rect) => {
          if (!rect) return

          this.setData({
            top: rect.top,
            height: rect.height,
            index,
          })
        })
        .exec()
    },
  },
})