学习 z-paging

阿伟来咯~

已于 2025-05-23 14:02:31 修改

阅读量1k

点赞数 4

文章标签：学习 uniapp

于 2024-11-06 16:02:06 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_65808257/article/details/143572700

版权

<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的高度，否则列表无法显示。
* !!!! :fixed="false" fixed默认值是true 设置后会有position：fixed;height:auto;
*若希望z-paging随着内容自动撑高，需设置:use-page-scroll="true"，无需修改fixed的配置，也无需*指定z-paging高度)
*show-scrollbar:是否显示滚动条
*inside-more:当分页未满一屏时，是否自动加载更多(nvue无效)
*query:下拉刷新或滚动到底部时会自动触发此方法。z-paging加载时也会触发(若要禁止，请设
*置:auto="false" auto设置初始第一次接口请求)。pageNo和pageSize会自动计算好，直接传给服务器即可。
* query使用：1.paging.value.reload(); 2.加载到底部或自动触发 
*:refresher-enabled="false" 是否启动下拉刷新 默认为true
*/
// const onRefresh = () => {
//   // 调用Z-Paging组件的refresh方法，重新刷新列表数据--开始加载
//   paging.value.refresh();
//   console.log('刷新');
// };
//query和onRefresh 不要一起使用 同时需要的时候使用query 即可 query的两个参数会自动设置
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插件导入的

官网：介绍 | z-paging文档用于分页下拉刷新滚动加载 tab也可以

有一个地方 paging.value.complete(list) 这里不用去考虑list是否为最后一页为空会自动设置文字的还是公司的好大哥提醒的

下面是关于切屏的问题：

// 标志位：是否是从切屏回来
let isHidden = false;

// 监听 visibilitychange 事件
document.addEventListener('visibilitychange', function () {
  if (document.visibilityState === 'hidden') {
    isHidden = true; // 切屏
  } else if (document.visibilityState === 'visible') {
    isHidden = false; // 页面重新显示
  }
});

onShow(async () => {
  // 判断用户是否切出去了 如果不是才执行
  if (!isHidden) {
    emit.value.type = 0;
    console.log('触发onshow');
  }
});
// 每次切换时都重新加载 主动触发下拉刷新的方法
  paging.value.reload();

/**
*后面又遇到了一个问题 我从其他页面回来我需要刷新当前页面，就想着使用onShow但是切屏我不希望触
*发，因为这样会导致z-paging的query事件的第一个参数pageNum不重置 ，我只想要页面内部跳转才刷新，
*所以想到有听过切屏暂停这个问题，所以就去查了一下
* 补充一个：paging.value.reload(); 用于主动触发下拉刷新的方法(即query事件对应的函数) 适合重置pageNum 可以用这个替换
*监听切屏事件 但是不好就在于切屏回来都会重置 不太好
*/

推荐还是选择全屏的z-paging 不然需要给flex:1来设置动态高度而且这个时候z-paging包裹的内容是一个fixed定位

采用第一种方法后会导致不满10条的时候不会触发下滑加载不知道如何处理可以替换为第二种但是不会显示加载中那些提示词(选择了一种比较合理的方法例如一次请求5条改为10条使用slice分次渲染)

======================以下为分点的功能==============================

可以在onshow中 paging.value.reload(true); 使用每次切换回来会执行下拉刷新

refresher-refreshing-img="/static/icon/loading_icon.png"
      refresher-refreshing-text="下拉刷新中…"
      :refresher-title-style="{
        fontFamily: 'PingFangSC, PingFang SC',
        fontWeight: 400,
        fontSize: '28rpx',
        color: '#000000',
        lineHeight: '40rpx',
        opacity: 0.6,
      }"

//上面是对应的部分配置项 关于自定义下拉刷新 加载中的配置 相关的还有下拉结束后的状态具体可以查看 //官网