123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118 |
- <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';
- import mpMixin from '../../libs/mixin/mpMixin.js';
- import mixin from '../../libs/mixin/mixin.js';
- // #ifdef APP-NVUE
- const dom = uni.requireNativePlugin('dom')
- // #endif
- /**
- * List 列表
- * @description 该组件为高性能列表组件
- * @tutorial https://ijry.github.io/uview-plus/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: [mpMixin, 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>
|