通知

由于此域名z-paging.com未备案,只能部署在国外的服务器上,因此此网站访问速度较慢。
为提供更快速的文档浏览体验,推荐访问国内镜像: https://z-paging.zxlee.cn (opens new window),感谢大家理解和支持。

虚拟列表

z-paging现已支持虚拟列表,支持cell动态高度。轻松渲染万级数据!点击查看

  ____     _ __   __ _  __ _(_)_ __   __ _ 
 |_  /____| '_ \ / _` |/ _` | | '_ \ / _` |
  / /_____| |_) | (_| | (_| | | | | | (_| |
 /___|    | .__/ \__,_|\__, |_|_| |_|\__, |
          |_|          |___/         |___/   文档
—————————————————————————————————————————————————
v2.4.8 (2022-11-03)
- by ZXLee
感谢使用^_^
1
2
3
4
5
6
7
8
9

# ⭐️ 如果您觉得z-paging还不错的话,可以点一个star鼓励一下(^ω^)👉🏻 Github stars (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

查看详情

特别注意

# ① v-model所绑定的list请不要在网络请求成功回调中自己修改,只需要将请求结果通过this.$refs.paging.complete(请求回调数组)传给z-paging即可,不要自己给list赋值!!

# ② @query所绑定的方法不要自己调用!!需要刷新列表数据时,只需要调用this.$refs.paging.reload()即可。