赞
踩
今天做分页列表,在插件市场找到了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)
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。