<z-paging
ref="paging"
v-model="dataList"
:fixed="false"
:show-scrollbar="false"
inside-more
@query="queryList"
>
xxxxx
</z-paging>
ts+setup语法糖写法:
const paging = ref<any>(null)
const dataList = ref<item[]>([])
/**
*fixed:(若不需要z-paging铺满全屏,例如希望在弹窗内使用z-paging,请设置:fixed="false",同时必*须指定z-paging的高度,否则列表无法显示。
*若希望z-paging随着内容自动撑高,需设置:use-page-scroll="true",无需修改fixed的配置,也无需*指定z-paging高度)
*show-scrollbar:是否显示滚动条
*inside-more:当分页未满一屏时,是否自动加载更多(nvue无效)
*query:下拉刷新或滚动到底部时会自动触发此方法。z-paging加载时也会触发(若要禁止,请设
*置:auto="false")。pageNo和pageSize会自动计算好,直接传给服务器即可。
* query使用:1.paging.value.reload(); 2.加载到底部或自动触发
*/
async function queryList(pageNo, pageSize) {
console.log('没有设置:auto="false,一开始就触发');
setTimeout(() => {
const list: any = [];
if (total.value++ <= 3) {
for (let i = 0; i < 15; i++) {
list.push({
type: (i % 2) + 1,
name: `霍林郭勒市第${i + 1}小学`,
});
}
}
paging.value.complete(list);//类似追加进去 (为dataList追加 主要是v-model)
}, 600);
// paging.value.complete(false); // 网络请求抛出异常时
}
--------------------------------------------------------------------------------
//接下来是我第一次写的
<z-paging
ref="paging"
:to-bottom-loading-more-enabled="isAll"
:loading-more-enabled="isAll"
@scrolltolower="addMore"
>
xxxxx
</z-paging>
这种bug特别多
我动态去维护isAll
也没有写v-model 所以使用paging.value.complete(list);会直接重新赋值
顺便说一个遇到的东西 const path = getCurrentPages()[0].route; 获取当前页面的path
对了 npm是安装不了这个 我都是去HBuilder插件导入的