更新记录

1.0.8（2023-05-12）

重新上架

1.0.6（2023-05-09）

下架

1.0.5（2023-05-09）

下架不再使用

平台兼容性

next-paging

功能&特点

• 【配置简单】仅需两步（绑定网络请求方法、绑定分页结果数组）轻松完成完整下拉刷新，上拉加载更多功能。
• 【低耦合，低侵入】分页自动管理。在page中无需处理任何分页相关逻辑，无需在data中定义任何分页相关变量，全由next-paging内部处理。
• 【超灵活，支持各种类型自定义】支持自定义下拉刷新，自定义上拉加载更多，自带自定义下拉刷新效果，及其他数十种自定义属性。
• 【功能丰富】支持国际化，支持自定义且自动管理空数据图，支持主题模式切换，支持本地分页，支持聊天分页模式，支持展示最后更新时间，支持吸顶效果，支持内部scroll-view滚动与页面滚动，支持一键滚动到顶部等诸多功能。
• 【全平台兼容】支持nvue，vue3，支持h5、app及各家小程序。
• 【高性能】在app-vue、h5、微信小程序、QQ小程序上使用wxs+renderjs从视图层实现下拉刷新；支持虚拟列表，轻松渲染万级数据！

反馈qq群：[455948571]()

使用

从uniapp插件市场导入

基本使用

<template>
     <next-paging 
        ref="paging" 
        v-model="dataList" 
        @query="queryList"
        :autoShowBackToTop="true"
        :defaultPageSize="15"
    >
        <!--top插槽-->
        <template #top><view class="slotTop"><text>我是顶部插槽内容</text></view></template>
        <!-- next-paging默认铺满全屏，此时页面所有view都应放在next-paging标签内，否则会被盖住 -->
        <!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
        <view class="item" v-for="(item,index) in dataList" :key="index">
            <view><text>{{index+1}}</text></view>   
            <view class="item-title"><text>{{item.title}}</text></view>
        </view>
        <!--bottom插槽-->
        <template #bottom><view class="slotBottom"><text>我是底部插槽内容</text></view></template>
    </next-paging>
</template>

|--------vue3用法-----------|

<script setup lang="ts">
    import { ref, unref } from 'vue';
    const paging = ref<any>(null)
    // v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
    let dataList = ref([])

    // @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用unref(paging).reload()即可
    const queryList = async (pageNo, pageSize) => {
        // 此处请求仅为演示，请替换为自己项目中的请求
        if (pageNo > 3) {
            // 模拟ajax请求
            await new Promise(res => setTimeout(res, 500))
            // 注意如果传进去的数据的数组长度小于pageSize，next-paging会自动判断没有更多数据了
            unref(paging).complete([{title: '结尾'}]);
        } else {
            let arr = []
            for (let i = 1; i<=pageSize; i++) {
                arr.push({title: '测试item:'+ ((pageNo-1)*pageSize + i)})
            }
            // 模拟ajax请求
            await new Promise(res => setTimeout(res, 500))
            unref(paging).complete(arr);
        }
    }
</script>

|--------vue2用法-----------|

<script>
    export default {
        data() {
            return {
                // v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
                dataList: []
            }
        },
        methods: {
            // @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
            async queryList(pageNo, pageSize) {
                // 此处请求仅为演示，请替换为自己项目中的请求
                if (pageNo > 1224) {
                    // 注意如果传进去的数据的数组长度小于pageSize，next-paging会自动判断没有更多数据了
                    // 模拟ajax请求
                    await new Promise(res => setTimeout(res, 500))
                    this.$refs.paging.complete([{title: '结尾'}]);
                } else {
                    let arr = []
                    for (let i = 1; i<=pageSize; i++) {
                        arr.push({title: '测试item:'+ ((pageNo-1)*pageSize + i)})
                    }
                    // 模拟ajax请求
                    await new Promise(res => setTimeout(res, 500))
                    this.$refs.paging.complete(arr);
                }
            }
        }
    };
</script>

虚拟列表使用

<!-- 虚拟列表演示(兼容写法) -->
<!-- 在微信小程序中若使用虚拟列表推荐使用兼容写法，具体写法参见demo中的virtual-list-compatibility-demo -->
<!-- 使用虚拟列表兼容写法时必须手动在next-paging的源代码next-paging.vue中搜索next-public-virtual-cell并打开相关注释 -->
<template>
    <view class="content">
        <!-- 如果页面中的cell高度是固定不变的，则不需要设置cell-height-mode，如果页面中高度是动态改变的，则设置cell-height-mode="dynamic" -->
        <next-paging 
            ref="paging" 
            use-compatibility-mode 
            :autoShowBackToTop="true" 
            use-virtual-list 
            @query="queryList">
            <!--top插槽-->
            <template #top><view class="slotTop"><text>我是顶部插槽内容</text></view></template>
            <!-- 通过slot="cell"插入列表for循环的cell，slot-scope中提供当前for循环的item和index -->
            <!-- 因字节跳动小程序不支持slot-scope，因此不支持字节跳动小程序 -->
            <!--bottom插槽-->
            <template #bottom><view class="slotBottom"><text>我是底部插槽内容</text></view></template>
        </next-paging>
    </view>
</template>

<!--开启use-compatibility-mode后，在组件目录next-paging/components/next-paging/components/next-public-virtual-cell.vue中定义虚拟dom的样式；next-public-virtual-cell.vue内容如下 -->
<template>
    <view class="item">
        <!-- <image class="item-image" mode="aspectFit" src="@/static/boji1.png"></image> -->
        <view class="item-content">
            <text class="item-title">第{{index + 1}}行</text>
            <text style="color: red;margin-left: 10rpx;" @click.stop="titleClick(`第${index + 1}行 虚拟列表展示`)">虚拟列表展示</text>
            <view class="item-detail">{{item.detail}}</view>
        </view>
        <view class="item-line"></view>
    </view>
</template>

<script>
    export default {
        name:"next-public-virtual-cell",
        props: {
            item: null,
            index: 0,
            extraData: null
        },
        data() {
            return {

            };
        },
        methods: {
            titleClick(title){
                //如果要把点击事件传给页面，可以通过给extraData中添加对应的函数，然后在当前组件中触发这个函数，在页面中监听即可
                if(this.extraData.titleClickedCallback){
                    this.extraData.titleClickedCallback(title);
                }
            }
        }
    }
</script>

<script setup lang="ts">
    import { ref, unref } from 'vue';
    const paging = ref<any>(null)
    // v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
    let dataList = ref([])

    // @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用unref(paging).reload()即可
    const queryList = async (pageNo, pageSize) => {
        // 此处请求仅为演示，请替换为自己项目中的请求
        if (pageNo > 113) {
            // 模拟ajax请求
            await new Promise(res => setTimeout(res, 500))
            // 注意如果传进去的数据的数组长度小于pageSize，next-paging会自动判断没有更多数据了
            unref(paging).complete([{title: '结尾'}]);
        } else {
            let arr = []
            for (let i = 1; i<=pageSize; i++) {
                arr.push({title: '测试item:'+ ((pageNo-1)*pageSize + i)})
            }
            // 模拟ajax请求
            await new Promise(res => setTimeout(res, 500))
            unref(paging).complete(arr);
        }
    }
</script>

参数

next-paging可选参数属性列表

(next-paging)back-to-top设置

(next-paging)data-handle设置

(next-paging)empty设置

(next-paging)loading设置

(next-paging)load-more设置

(next-paging)nvue设置

(next-paging)scroller设置

Slot 插槽

预览

普通模式演示	虚拟列表模式演示

参考

本插件基于z-paging进行二开，有需要的可以直接访问原版，可能后续功能会存在差异

参考 z-paging 一个uni-app (opens new window)分页组件