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> |