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

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

<script>
import props from './props.js';
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom')
// #endif
/**
 * List 列表
 * @description 该组件为高性能列表组件
 * @tutorial https://www.uviewui.com/components/list.html
 * @property {String | Number}  anchor  用于滚动到指定item
 * @example <u-list-ite v-for="(item, index) in indexList" :key="index" ></u-list-item>
 */
export default {
  name: 'u-list-item',
  mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  data() {
    return {
      // 节点信息
      rect: {},
      index: 0,
      show: true,
      sys: uni.$u.sys()
    }
  },
  computed: {},
  inject: ['uList'],
  watch: {
    // #ifndef APP-NVUE
    'uList.innerScrollTop'(n) {
      const preLoadScreen = this.uList.preLoadScreen
      const windowHeight = this.sys.windowHeight
      if (n <= windowHeight * preLoadScreen) {
        this.parent.updateOffsetFromChild(0)
      } else if (this.rect.top <= n - windowHeight * preLoadScreen) {
        this.parent.updateOffsetFromChild(this.rect.top)
      }
    }
    // #endif
  },
  created() {
    this.parent = {}
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 初始化数据
      this.updateParentData()
      this.index = this.parent.children.indexOf(this)
      this.resize()
    },
    updateParentData() {
      // 此方法在mixin中
      this.getParentData('u-list')
    },
    resize() {
      this.queryRect(`u-list-item-${this.anchor}`).then(size => {
        const lastChild = this.parent.children[this.index - 1]
        this.rect = size
        const preLoadScreen = this.uList.preLoadScreen
        const windowHeight = this.sys.windowHeight
        // #ifndef APP-NVUE
        if (lastChild) {
          this.rect.top = lastChild.rect.top + lastChild.rect.height
        }
        if (size.top >= this.uList.innerScrollTop + (1 + preLoadScreen) * windowHeight) this.show =
            false
        // #endif
      })
    },
    // 查询元素尺寸
    queryRect(el) {
      return new Promise(resolve => {
        // #ifndef APP-NVUE
        this.$uGetRect(`.${el}`).then(size => {
          resolve(size)
        })
        // #endif

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

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

.u-list-item {
}
</style>