微信小程序 下拉分页 z-paging下拉刷新、上拉加载

【z-paging下拉刷新、上拉加载】高性能,全平台兼容。支持虚拟列表,支持nvue、vue3 - DCloud 插件市场

 z-paging,使用非常简单,按部就班就行了

1,首先将其导入自己的小程序项目中

 导入后的效果

2,具体如何使用:https://z-paging.zxlee.cn 

 选项式api写法(vue2/vue3)

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

<script>
    export default {
        data() {
            return {
				// v-model绑定的这个变量不要在分页请求结束中自己赋值,直接使用即可
                dataList: []
            };
        },
        methods: {
			// @query所绑定的方法不要自己调用!!需要刷新列表数据时,只需要调用this.$refs.paging.reload()即可
            queryList(pageNo, pageSize) {
				// 此处请求仅为演示,请替换为自己项目中的请求
                this.$request.queryList({ pageNo,pageSize }).then(res => {
                	this.$refs.paging.complete(res.data.list);
                })
            }
        },
    };
</script>

组合式api写法(vue3)

<template>
    <!-- 与选项式api写法一致 -->
</template>

<script setup>
    import { ref } from 'vue';
    const paging = ref(null)
	// v-model绑定的这个变量不要在分页请求结束中自己赋值,直接使用即可
    let dataList = ref([])
    
	// @query所绑定的方法不要自己调用!!需要刷新列表数据时,只需要调用paging.reload()即可
    const queryList = (pageNo, pageSize) => {
		// 此处请求仅为演示,请替换为自己项目中的请求
        request.queryList({ pageNo,pageSize }).then(res => {
            paging.value.complete(res.data.list);
        })
    }
</script>

 具体效果:可以微信小程序:菜谱乐园   体验

 

 文章来源地址https://www.uudwc.com/A/ykNxo/

原文地址:https://blog.csdn.net/qq_39772439/article/details/129127889

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

h
上一篇 2023年06月30日 08:21
百度用AIGC开启2023“好运中国年”,玩法升级陪你过新春
下一篇 2023年06月30日 08:22