学习 z-paging

<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插件导入的
上一篇:DevOps业务价值流:需求设计最佳实践


下一篇:Context的典型使用场景