uniapp 滚动加载好用插件

插件地址下载

【z-paging下拉刷新、上拉加载】高性能，全平台兼容。支持虚拟列表，支持nvue、vue3 - DCloud 插件市场

插件文档

reload相关配置 | z-paging文档 (zxlee.cn)

插件示例

如果一行要是想显示两行virtual-list-col="2"

<z-paging :refresher-enabled="false" ref="paging" use-virtual-list virtual-list-col="2" cell-height-mode="fixed"
@query="queryList" @scroll="scroll">
 <template #cell="{item,index}">
     //组件
  </template>
</z-paging>

getConcentrationList(pageNo, pageSize) {
      // 获取精选列表
      uni.showLoading({
        title: '加载中'
      });
      this.$http.post("接口请求", {
        pageNo: pageNo,
        pageSize: pageSize,
      }).then((res) => {
        //将请求的结果数组传递给z-paging
        this.$refs.paging.complete(res.result.result);
        uni.hideLoading();
      }).catch(res => {
        //如果请求失败写this.$refs.paging.complete(false);
        //注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
        //在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
        this.$refs.paging.complete(false);
        uni.hideLoading();
      })
    }