pco/app/uview-ui/components/u-index-item/u-index-item.vue

<template>
  <!-- #ifdef APP-NVUE -->
  <cell ref="u-index-item">
    <!-- #endif -->
    <view
        class="u-index-item"
        :id="`u-index-item-${id}`"
        :class="[`u-index-item-${id}`]"
    >
      <slot/>
    </view>
    <!-- #ifdef APP-NVUE -->
  </cell>
  <!-- #endif -->
</template>

<script>
import props from './props.js';
// #ifdef APP-NVUE
// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
const dom = uni.requireNativePlugin('dom')
// #endif
/**
 * IndexItem
 * @description
 * @tutorial https://uviewui.com/components/indexList.html
 * @property {String}
 * @event {Function}
 * @example
 */
export default {
  name: 'u-index-item',
  mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  data() {
    return {
      // 本组件到滚动条顶部的距离
      top: 0,
      height: 0,
      id: ''
    }
  },
  created() {
    // 子组件u-index-anchor的实例
    this.anchor = {}
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 此处会活动父组件实例，并赋值给实例的parent属性
      this.getParentData('u-index-list')
      if (!this.parent) {
        return uni.$u.error('u-index-item必须要搭配u-index-list组件使用')
      }
      uni.$u.sleep().then(() => {
        this.getIndexItemRect().then(size => {
          // 由于对象的引用特性，此处会同时生效到父组件的children数组的本实例的top属性中，供父组件判断读取
          this.top = Math.ceil(size.top)
          this.height = Math.ceil(size.height)
        })
      })
    },
    getIndexItemRect() {
      return new Promise(resolve => {
        // #ifndef APP-NVUE
        this.$uGetRect('.u-index-item').then(size => {
          resolve(size)
        })
        // #endif

        // #ifdef APP-NVUE
        const ref = this.$refs['u-index-item']
        dom.getComponentRect(ref, res => {
          resolve(res.size)
        })
        // #endif
      })
    }
  },
}
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

</style>