虚拟列表
z-paging
现已支持虚拟列表,支持cell动态高度。轻松渲染万级数据!点击查看
____ _ __ __ _ __ _(_)_ __ __ _
|_ /____| '_ \ / _` |/ _` | | '_ \ / _` |
/ /_____| |_) | (_| | (_| | | | | | (_| |
/___| | .__/ \__,_|\__, |_|_| |_|\__, |
|_| |___/ |___/ 文档
—————————————————————————————————————————————————
v2.3.2 (2022-06-21)
- by ZXLee
感谢使用^_^
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# ⭐️ 如果您觉得z-paging
还不错的话,可以点一个star鼓励一下(^ω^)👉🏻
(opens new window)
# 基本使用
<template>
<view class="content">
<z-paging ref="paging" v-model="dataList" @query="queryList">
<view class="item" v-for="(item,index) in dataList" :key="index">
<view class="item-title">{{item.title}}</view>
</view>
</z-paging>
</view>
</template>
<script>
export default {
data() {
return {
dataList: []
};
},
methods: {
queryList(pageNo, pageSize) {
this.$request.queryList({ pageNo,pageSize }).then(res => {
this.$refs.paging.complete(res.data.list);
})
}
},
};
</script>
<style scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
特别注意
# ① v-model所绑定的list请不要在网络请求成功回调中自己修改,只需要将请求结果通过this.$refs.paging.complete(请求回调数组)
传给z-paging即可,不要自己给list赋值!!
# ② @query所绑定的方法不要自己调用!!需要刷新列表数据时,只需要调用this.$refs.paging.reload()
即可。
Copyright 2022 z-paging | 闽ICP备17015849号-1