【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://www.uudwc.com/A/ykNxo/