zhangmeng
2024-04-19 e3ba120cb766a17e098e58d11c39ffc600a3070c
commit | author | age
e3ba12 1 <template>
Z 2     <!-- #ifdef APP-NVUE -->
3     <cell>
4         <!-- #endif -->
5         <view
6             class="u-list-item"
7             :ref="`u-list-item-${anchor}`"
8             :anchor="`u-list-item-${anchor}`"
9             :class="[`u-list-item-${anchor}`]"
10         >
11             <slot />
12         </view>
13         <!-- #ifdef APP-NVUE -->
14     </cell>
15     <!-- #endif -->
16 </template>
17
18 <script>
19     import props from './props.js';
20     // #ifdef APP-NVUE
21     const dom = uni.requireNativePlugin('dom')
22     // #endif
23     /**
24      * List 列表
25      * @description 该组件为高性能列表组件
26      * @tutorial https://www.uviewui.com/components/list.html
27      * @property {String | Number}    anchor    用于滚动到指定item
28      * @example <u-list-ite v-for="(item, index) in indexList" :key="index" ></u-list-item>
29      */
30     export default {
31         name: 'u-list-item',
32         mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
33         data() {
34             return {
35                 // 节点信息
36                 rect: {},
37                 index: 0,
38                 show: true,
39                 sys: uni.$u.sys()
40             }
41         },
42         computed: {
43
44         },
45         inject: ['uList'],
46         watch: {
47             // #ifndef APP-NVUE
48             'uList.innerScrollTop'(n) {
49                 const preLoadScreen = this.uList.preLoadScreen
50                 const windowHeight = this.sys.windowHeight
51                 if(n <= windowHeight * preLoadScreen) {
52                     this.parent.updateOffsetFromChild(0)
53                 } else if (this.rect.top <= n - windowHeight * preLoadScreen) {
54                     this.parent.updateOffsetFromChild(this.rect.top)
55                 }
56             }
57             // #endif
58         },
59         created() {
60             this.parent = {}
61         },
62         mounted() {
63             this.init()
64         },
65         methods: {
66             init() {
67                 // 初始化数据
68                 this.updateParentData()
69                 this.index = this.parent.children.indexOf(this)
70                 this.resize()
71             },
72             updateParentData() {
73                 // 此方法在mixin中
74                 this.getParentData('u-list')
75             },
76             resize() {
77                 this.queryRect(`u-list-item-${this.anchor}`).then(size => {
78                     const lastChild = this.parent.children[this.index - 1]
79                     this.rect = size
80                     const preLoadScreen = this.uList.preLoadScreen
81                     const windowHeight = this.sys.windowHeight
82                     // #ifndef APP-NVUE
83                     if (lastChild) {
84                         this.rect.top = lastChild.rect.top + lastChild.rect.height
85                     }
86                     if (size.top >= this.uList.innerScrollTop + (1 + preLoadScreen) * windowHeight) this.show =
87                         false
88                     // #endif
89                 })
90             },
91             // 查询元素尺寸
92             queryRect(el) {
93                 return new Promise(resolve => {
94                     // #ifndef APP-NVUE
95                     this.$uGetRect(`.${el}`).then(size => {
96                         resolve(size)
97                     })
98                     // #endif
99
100                     // #ifdef APP-NVUE
101                     const ref = this.$refs[el]
102                     dom.getComponentRect(ref, res => {
103                         resolve(res.size)
104                     })
105                     // #endif
106                 })
107             }
108         }
109     }
110 </script>
111
112 <style lang="scss" scoped>
113     @import "../../libs/css/components.scss";
114
115     .u-list-item {}
116 </style>