【uniapp踩坑记】使用z-paging组件,微信小程序端加载不出来问题解决

使用z-paging组件,h5端加载正常,微信小程序端显示空白

今天做分页列表,在插件市场找到了z-paging,照着示例代码写了进去,在h5端能正常使用,在小程序端一直显示空白

尝试过以下无效操作:
1.清除所有文件缓存,不停重新编译,没用
2.修改小程序版本库,没用
3.组合式api改为选项式api,没用
代码如下:

//vue
<template>
<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
		<view class="item" v-for="(item,index) in dataList" :key="index">
			<view class="platform_name">{{item.title}}</view>
		</view>
	</z-paging>
</template>
//javascript
<script setup lang="ts">
	import { ref } from 'vue';
	// 必须导入需要用到的页面生命周期(即使在当前页面上没有直接使用到)
	import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	
    const paging = ref(null)
	
    let dataList = ref([])
	
	// 类似mixins,如果是页面滚动务必要写这一行,并传入当前ref绑定的paging,注意此处是paging,而非paging.value
	useZPaging(paging)
	function queryList(pageNo, pageSize){
		//这里应该调用api接口,调试阶段直接赋值
		paging.value.complete([{title:'111'},{title:'222'}]);
	}
</script>

最终解决方案——关闭整个HBuilder,项目重新运行。。。。。。。
整个项目重启后就正常了,真的吐血,浪费了3个小时一直以为自己代码有问题。。

后面发现JavaScript代码中,以下代码可以移除,这几行移除不影响正常使用
后记:这几行如果使用页面滚动必须加上,不然无法正常上滑

import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";

useZPaging(paging)
以下是一个使用 z-paging 进行上划加载页面数据的微信小程序代码例子: 首先,在小程序的 `app.js` 文件中引入 z-paging: ```javascript const ZPaging = require('path/to/z-paging.js'); ``` 然后,在需要使用 z-paging 的页面中,创建一个 z-paging 实例,并使用 `loadData` 方法加载页面数据。在用户上划页面时,`onReachBottom` 方法会被调用,我们可以在这个方法中调用 `loadMore` 方法,以达到上划加载更多数据的效果: ```javascript Page({ data: { dataList: [] }, onLoad: function () { this.zpaging = new ZPaging({ url: 'https://www.example.com/data', dataKey: 'dataList', pageSize: 10 }); this.zpaging.loadData(); }, onReachBottom: function () { this.zpaging.loadMore(); } }); ``` 上面的代码中,我们首先创建了一个 z-paging 实例 `zpaging`,并在 `onLoad` 方法中调用了 `loadData` 方法加载页面数据。其中,`url` 参数为数据请求的地址,`dataKey` 参数为返回数据中包含数据列表的字段名,`pageSize` 参数为每页数据的数量。当用户上划页面时,`onReachBottom` 方法会被调用,我们可以在这个方法中调用 `loadMore` 方法,以达到上划加载更多数据的效果。 需要注意的是,在实际开发中,我们还需要对数据加载失败、网络连接超时等异常情况进行处理。同时,为了避免频繁进行网络请求,我们可以使用缓存机制,对已经请求过的数据进行缓存。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值