smilezxlee / uni-z-paging

【uni-app下拉刷新、上拉加载】高性能，全平台兼容。支持vue、nvue、vue2、vue3，使用wxs+renderjs实现。支持虚拟列表，支持自定义下拉刷新、上拉加载更多，支持自动管理空数据图、点击返回顶部，支持聊天分页、本地分页，支持国际化等100+项配置

Hi there 👋

• 喜欢写字✍️
• 喜欢科幻悬疑类的电影🎬
• 喜欢编程，希望能造更多有趣的轮子👨‍💻‍
• 最近：跑步🏃🏻
• 交流qq群：1群(3000人群，已满)：790460711；2群(2000人群)：371624008

uni-z-paging's Issues

钉钉小程序下报错

[Vue warn]: Error in callback for immediate watcher "nIsFirstPageAndNoMore": "TypeError: Cannot read property 'props' of undefined"
[Vue warn]: Error in nextTick: "TypeError: Cannot read property 'props' of undefined"

编译出现警告

 WARNING  Compiled with 1 warning下午5:26:27



 warning  in ./node_modules/z-paging/components/z-paging/js/z-paging-utils.js


Module not found: Error: Can't resolve '@/uni_modules/z-paging' in 'D:\Project\Web\UniApp\project\demo\node_modules\z-paging\components\z-paging\js'

如何实现滚动到底部之后，再次上滑加载下一个分类【🌰：美团买菜】

在当前分类上滑浏览至当前分类最后一项，会显示【上滑查看下一分类】，下拉同理

数据显示不到屏幕底部的上拉，是不是只能用scroll-view的模式

数据显示不到屏幕底部的上拉，是不是只能用scroll-view的模式？

就是如果页面包括初始化，每次上拉只加载一条数据（数据显示没到底部的情况）
是不是只能用scroll-view的模式
还是说设置body高度把屏幕撑满比较好？

vue3版本下微信开发工具报错

[渲染层错误] TypeError: Cannot read property 'nv_indexOf' of undefined
at nv_propObserver (http://127.0.0.1:64593/__pageframe__/__dev__/wxml.js?t=wechat&s=1650245598709&v=1a6c7d23c6dfd258b75332f346905229:2069:343)
at Object.a.safeCallback (http://127.0.0.1:64593/__pageframe__/__dev__/WAWebview.js?t=wechat&s=1650245598709&v=2.23.2:2:350825)
at http://127.0.0.1:64593/__pageframe__/__dev__/WAWebview.js?t=wechat&s=1650245598709&v=2.23.2:2:1845007
at http://127.0.0.1:64593/__pageframe__/__dev__/WAWebview.js?t=wechat&s=1650245598709&v=2.23.2:2:1845195
at Array.forEach ()
at http://127.0.0.1:64593/__pageframe__/__dev__/WAWebview.js?t=wechat&s=1650245598709&v=2.23.2:2:1844845(env: Windows,mp,1.05.2203251; lib: 2.23.2)

具体原因不明，注释掉z-paging就不会报错了

enablePullDownRefresh 需要手动设置为 false 吗

enablePullDownRefresh 使用默认的 false 时,滑到页面底部时会有卡顿现象
当手动设置为 false 时,就不卡顿了...

加载中模态框不显示

vue2 +z-paging2.5.3 数据加载正常，获取数据时， 加载中...模态框不显示，如何解决

当前数据为空时，下拉刷新能否保留数据为空展示

聊天记录模式 底部输入弹起会把 top插槽里的内容顶出屏幕外

比如我想滚动条滚动到某一个item 后，想修改这item 的状态 能设置吗？

假设item 中有一个is_read=0；滚动条滚动到这个item 后，我想将is_read =1，不刷新页面的情况下，一直保持状态

支持上拉和下拉事件自定义操作吗？

支持上拉和下拉事件自定义操作吗？不要刷新 也不要加载的那种

微信小程序点击事件问题

代码如下：点击item的时候报错TypeError: Cannot read property 'id' of undefined，dataList的item里保证有id属性

<template>
	<view class="content">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view slot="top" class="bg-white mx-14 mt-14 p-14 rounded-4">
				<z-tabs :list="tabslist" @change="onChange"></z-tabs>
			</view>
			<view v-for="(item, index) in dataList" :key="itme.id" class="mt-14 bg-white rounded-4 px-14 mx-14"
				@click="handleItemClick(item.id)">
				<view class="border-b-1 border-solid border-border py-14">
					{{item.orderNm}}
				</view>

				<view class="flex justify-between items-center py-14">
					<view :class="orderStatusInfo[item.orderStatus].className">
						{{orderStatusInfo[item.orderStatus].text}}
					</view>
					<view class="text-info">
						{{$formateDate(item.addTime, 'YYYY-MM-DD HH:mm')}}
					</view>
					<view>
						¥ <text class="text-error text-20 font-medium">{{item.orderPrice}}</text>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		fetchMyList
	} from '@/api/modules/my.js'
	import {
		orderStatusInfo
	} from '@/common/constant.js'
	export default {
		data() {
			return {
				dataList: [],
				searchText: '',
				orderStatusInfo,
				currentValue: 999,
				tabslist: [{
						name: '全部',
						value: 999
					},
					{
						name: '待支付',
						value: 101
					},
					{
						name: '已支付',
						value: 201
					},
					{
						name: '已取消',
						value: 102
					},
					{
						name: '申请退款',
						value: 202
					},
					{
						name: '已退款',
						value: 203
					},
					{
						name: '已结束',
						value: 401
					}
				]
			}
		},
		methods: {
			queryList(pageNo, pageSize) {
				const params = {
					page: pageNo,
					limit: pageSize,
				}
				if (this.currentValue !== 999) {
					params.orderStatus = this.currentValue
				}
				fetchMyList(params).then(res => {

					this.$refs.paging.complete(res.list);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
			onChange(_, value) {
				this.currentValue = value
				this.$refs.paging.reload()
			},
			handleItemClick(id) {
				uni.navigateTo({
					url: `/pages/my/order/detail?id=${id}`
				})
			}
		}
	}
</script>

<style></style>

vue3 下拉刷新总是出现在左边

是还没完全适配 vue3 吗？ 当然这里使用自定义应该是没问题 但是 Vue3 还是一大堆问题的，有没有适配日程

有没有考虑过下拉刷新仅仅做刷新，不是分页的场景，例如商品详情页

启用:show-refresher-when-reload="true"后，连续多次reload后，只执行一次complete时refresher不会自动隐藏

修改
https://github.com/SmileZXLee/uni-z-paging/blob/8ffeecde89451ba18489f61a09746d71f4c332a7/z-paging/pages/consistency-demo/consistency-demo.vue

加入 :show-refresher-when-reload="true" 可复现

是否可以出一个Taro Vue版本

目前Taro也推出了Vue版本，作者是否考虑出一个适配Taro的，Taro的物料稀缺

vscode: vue3 ts 类型“never”上不存在属性“complete”

1. 使用v3 setup方式， paging.value.complete(data) 提示：如题。

在vue3 + ts + vite 环境下，运行在iOS iPhone 14 Pro Max模拟器上，报下面错误

11:30:11.904 at <ZPaging modelValue= onUpdate:modelValue=fn onQuery=fn ... >
11:30:11.910 at <Index __pageId=1 __pagePath="pages/index/index" __pageQuery= {} ... > __WARN
11:30:11.915 TypeError: vue.undefined is not a function. (In 'vue.undefined(_ctx.wxsPropType)', 'vue.undefined' is undefined) __ERROR
11:30:11.915 at <ZPaging modelValue= [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object] onUpdate:modelValue=fn onQuery=fn ... >
11:30:11.921 at <Index __pageId=1 __pagePath="pages/index/index" __pageQuery= {} ... > __WARN
11:30:11.926 TypeError: vue.undefined is not a function. (In 'vue.undefined(_ctx.wxsPropType)', 'vue.undefined' is undefined) __ERROR
11:30:11.932 at <ZPaging modelValue= [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object] onUpdate:modelValue=fn onQuery=fn ... >
11:30:11.932 at <Index __pageId=1 __pagePath="pages/index/index" __pageQuery= {} ... > __WARN
11:30:11.939 TypeError: We.setAttribute is not a function. (In 'We.setAttribute(R.ATTR_V_OWNER_ID,it.uid)', 'We.setAttribute' is undefined) __ERROR
11:30:11.940 at <ZPaging modelValue= [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object] onUpdate:modelValue=fn onQuery=fn ... >
11:30:11.949 at <Index __pageId=1 __pagePath="pages/index/index" __pageQuery= {} ... > __WARN
11:30:11.956 TypeError: vue.undefined is not a function. (In 'vue.undefined(_ctx.wxsPropType)', 'vue.undefined' is undefined) __ERROR

大佬请教个问题 ，我数据量大于了1500条之后 ，再次请求页面会出现白屏，请问怎么解决

支持瀑布流吗

大佬 你好，请问下这个组件支持瀑布流吗

页面上方有留白问题

问题背景

项目中不需要uni自带的navigationBar，所以在pages.json中的globalStyle节点配置了"navigationStyle": "custom"
但是z-paging表现样式却还是预留了上方navigationBar的空间

解决方式

在z-paging-main.js中的finalPagingStyle()方法下，if(windowTop && !pagingStyle.top)判断后修改为如下代码

let head = document.getElementsByTagName("uni-page-head"); if (head.length > 0) { pagingStyle.top = windowTop + 'px'; } else { pagingStyle.top = '0px'; }

遗留问题

此方法只在h5做了测试，其他平台需要适配

直接复制demo来的，页面报错

<!-- 普通模式演示(vue) -->
<template>
  <view class="content">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
      <!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
      <z-tabs slot="top" @change="tabChange" :list="tabList"></z-tabs>
      <!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
      <view class="item" v-for="(item, index) in dataList" :key="index" @click="itemClick(item, index)">
        <view class="item-title">{{ item.title }}</view>
        <view class="item-detail">{{ item.detail }}</view>
        <view class="item-line"></view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      //v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
      dataList: [],
      tabList: ['测试1', '测试2', '测试3', '测试4', '测试5'],
      tabIndex: 0
    }
  },
  methods: {
    tabChange(index) {
      this.tabIndex = index
      //当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
      this.$refs.paging.reload()
    },
    queryList(pageNo, pageSize) {
      //组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
      //这里的pageNo和pageSize会自动计算好，直接传给服务器即可
      //模拟请求服务器获取分页数据，请替换成自己的网络请求
      const params = {
        pageNo: pageNo,
        pageSize: pageSize,
        type: this.tabIndex + 1
      }
      this.$request
        .queryList(params)
        .then((res) => {
          //将请求的结果数组传递给z-paging
          this.$refs.paging.complete(res.data.list)
        })
        .catch((res) => {
          //如果请求失败写this.$refs.paging.complete(false);
          //注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
          //在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
          this.$refs.paging.complete(false)
        })
    },
    itemClick(item, index) {
      console.log('点击了', item.title)
    }
  }
}
</script>

<style>
.item {
  position: relative;
  height: 150rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rpx 30rpx;
}

.item-detail {
  padding: 5rpx 15rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: white;
  background-color: #007aff;
}

.item-line {
  position: absolute;
  bottom: 0rpx;
  left: 0rpx;
  height: 1px;
  width: 100%;
  background-color: #eeeeee;
}
</style>

use-page-scroll 问题

当 use-page-scroll 存在时候, 使用了 slot="top" 固定头 后, 下方列表区域 无法滚动

使用css 反转变换暗黑模式时出现问题

当我正常使用 z-paging时，无任何问题，当我在z-paging的外层增加一层

<view :class="isDark?'dark-mode':''"></view>

而dark-mode的定义为:

.dark-mode{ filter:invert(1) hue-rotate(180deg); }

此时，列表会直接消失，无法看到，请问该如何解决

使用贵插件在安卓和ios正常，在h5中提示Uncaught (in promise) TypeError: Cannot read property 'complete' of undefined

slot=“top”顶部采用uview的搜索框，在微信小程序快速上拉会造成搜索框placeholder短暂消失

这个问题很怪异，在app端挺正常，微信小程序存在这个问题。
<z-paging ref="paging" v-model="dataList" @query="getData" :default-page-size="5" :auto-show-back-to-top="true" :refresher-end-bounce-enabled="true" :refresher-complete-delay="300"> <view class="options" slot="top"> <view class="search"> <u-search placeholder="请输入关键词" v-model="keyword" :clearabled="true" :show-action="true" action-text="搜索" @custom="$refs.paging.reload()" @search="$refs.paging.reload()" :animation="false"></u-search> </view> <view class="search" style="margin-top: 15rpx"> <u-subsection :list="list" :current="0" @change="typeChange"></u-subsection> </view> </view> <remain :page-data="item" v-for="(item, index) in dataList" :key="index"></remain> </z-paging>

啥时候考虑出个vue3的版本

现在支持vue3的下拉刷新上拉加载的组件太少了。
mescroll说是支持vue3，但是只能在options api下使用，这和不支持vue3也没区别。而且依赖onPageScroll、onReachBottom这几个页面的生命周期，封装成组件也需要在页面支持这几个生命周期，又回到options api了。
我现在解决方案是用scroll-view，但是onPullDownRefresh无法一起用。
总之，还是需要一个完美支持vue3+ts的上拉下拉组件。这个市场目前还是空白，希望大佬能考虑下

请增加国际化的支持

目前主要是英文版的提示文字，这里老大是否考虑支持下

大佬考虑出一个纯vue版本的吗

vue3下常规使用安卓模拟器会提示内存溢出的报错

初步定位原因是在z-paging.vue中第99行引入的zp-public-virtual-cell这个组件未注册所导致的，所以为了规避这个报错只能先将这个组件注释掉了，在h5中只是黄色的警告不影响正常的使用

，但是在安卓机上不行。版本2.4.0

在钉钉小程序上pages/swiper-demo/swiper-demo有兼容问题

在钉钉小程序上运行pages/swiper-demo/swiper-demo这个页面，如果是多个tab的情况，列表不能下拉刷新

用了z-paging后，导致我的u-tabs滚动位置跳动

<z-paging ref="paging">
	<template slot="top">
		<u-tabs ref="uTabs" :list="tabList" :is-scroll="true" :current="tabCurrent" @change="tabChange"
			active-color="#101010" inactive-color="#A8A8A8" :bar-style="barStyle" font-size="25"
			:active-item-style="activeItemStyle" />
	</template>
	<view v-for="(item,index) in zDataList" :key="index" class="u-m-t-20 u-m-b-20">
		<radio-scheme-list-item :value="item" @click="toDetail(index)" />
	</view>
</z-paging>

可以加载grid网格布局么

当页面中存在picker组件时，下拉picker组件会引起页面的下拉刷新

当页面中存在picker组件时，下拉picker组件会引起页面的下拉刷新，如何解决，盼回复！

refs mian 属性 无法找到问题

在使用vue3 H5 uniapp 编译的时候出现报错
Cannot set property 'style' of undefined

组件加了 use-page-scroll:true 配置

报错文件位置 \z-paging\components\z-paging\js\modules\scroller.js

line 82

this.$nextTick(()=>{ this.$refs['zp-scroll-view'].$refs.main.style = {}; })

好像是无法找到对应的组件还是怎么，还是能正常用就是会每次打开报错

我暂时本地改成了,

if(this.$refs['zp-scroll-view'].$refs.main) this.$refs['zp-scroll-view'].$refs.main.style = {};

如果有更好的办法我再改下

2.2.0 版本，下拉刷新提示文字如何隐藏？

如图示，数据加载完毕后，下拉刷新提示文字跑到上边去了，没有办法隐藏掉。选项卡不是固定位置的，需要根据页面滚动而滚动。

@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin 不支持 Vue3

@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin 用的是 mixin，Vue3 已经不支持 mixin 的了

虚拟列表滚动抖动，key定位偏移

63972dece7596b0331586435c7981881.mp4

show-loading-more-when-reload设置为true时，调用reload不显示正在加载...

1.版本
2.5.3
2.使用场景
搜索页面，不需要下拉刷新，只使用加载更多，且刚进入页面时也不调用接口
3.问题描述
reload时设置显示加载更多，但是不显示
4.代码

    <!-- 刚进入页面时也不调用接口需要再加上 :auto="false" -->
    <z-paging ref="paging" v-model="dataList" :refresher-enabled="false" hide-empty-view show-loading-more-when-reload @query="queryList">
      <view slot="top" class="card-search-header">
        <view class="card-search-input">
          <u--input v-model="inputValue" confirmType="search" placeholder="请输入" @confirm="search"></u--input>
        </view>
      </view>

      <bc-card-item v-for="(item,index) in dataList" :key="index" :item="item" />
    </z-paging>

<script>
  export default {
    data() {
      return {
        inputValue: "",
        searchLoading: false,
        dataList: [],
      };
    },

    methods: {
      queryList(pageNo, pageSize) {
        console.log(pageNo, pageSize, this.inputValue);
        this.searchLoading = true;
        setTimeout(() => {
          // datas随便写四五条
          const datas = [{
            avatar: "",
            name: 'xxx',
          }];
          this.$refs.paging.complete(datas);
          this.searchLoading = false;
        }, 5000)
      },

      search(e) {
        this.$refs.paging.reload();
      },
    },
  }
</script>

reload时，应该显示solt="loading"

uni-z-paging/z-paging/uni_modules/z-paging/components/z-paging/js/z-paging-main.js

Line 1252 in 5ca7fa2

return !this.firstPageLoaded && (this.autoHideLoadingAfterFirstLoaded ? (this.fromEmptyViewReload ? true : !this.pagingLoaded) : true) && this.loading;

autoHideLoadingAfterFirstLoaded设置为true，reload时，solt="loading"不显示

按我的理解，autoHideLoadingAfterFirstLoaded意思是，加载第一页时显示loading，加载第2/3...页时隐藏loading

但是现在只有第一次加载第一页时才显示，reload加载第一页时不显示了

是不是应该在reload时将this.pagingLoaded设置为false

是否有下一页问题

我们接口是通过返回hasNext字段来区分是否有下一页的，有时候返回的数据可能是9条有时候可能是18条这种情况怎么设置pageSize呢？

自定义loading图片隐藏顺序bug

场景描述：使用nuve下，多选项卡的页面，切换swiper时在app中用如下代码：
<view slot="loading"> <view class="index-tab-loading"> <image class="index-tab-loading-image" src="/static/images/index/page-loading.gif"></image> </view> </view>

切换后数据先加载出来，然后再隐藏的loading图片，加载图片会被往下拉下来，体验上感觉怪怪的，希望能够优化一下，有描述不清楚的可以追加
如图：

聊天记录模式时，当有top插槽时，滚动位置错误

uni-z-paging/z-paging/uni_modules/z-paging/components/z-paging/js/z-paging-main.js

Line 1898 in aa00316

this._scrollIntoView(idIndexStr, 30, false, () => {

这里的offset 30是.zp-chat-record-loading-container的高度，少了top插槽高度.

.zp-n-refresh-container 样式 不应该固定宽度

.zp-n-refresh-container {
/* #ifndef APP-NVUE /
display: flex;
/ #endif /
justify-content: center;
width: 750rpx; / 这里不应该固定宽度， 否则，非750宽度的下的 下拉刷新会歪的*/
}

【严重bug】小程序组件中使用z-paging时，scrollIntoViewById等方法无效，原因是........

【严重bug】小程序组件中使用z-paging时，scrollIntoViewById等方法无效，原因是因为inThis要为true，限制查询范围为当前组件，并且还有另外一个bug，uni.createSelectorQuery().in(this)中的this需要从组件中传过来，而不是直接写this，因为这个this是该函数的上下文，不是组件的上下文，看下图：

scroll-view 微信小程序回弹属性设置一个?

有个需求是分类滑动到底部且没有更多数据时，再向上滑动切换到下个分类，iOS微信小程序会有个回弹的效果交互就有点问题。

是否考虑支持淘宝购物小程序？

淘宝近两年出了一个叫【淘宝购物小程序】的开发平台，是否考虑支持淘宝购物小程序？

不支持vue2吗

不支持vue2吗 vuecli

z-paging使用案例收集

感谢使用z-paging，您可以在下方评论中添加使用了z-paging的项目，案例将会被添加在首页和官网中。感谢！！
评论中请备注项目名和项目地址，如果是小程序的话请附上小程序码。

refresh时，nomore错误

总共25条数据，每页10条，共3页
加载第2页后，调用refresh，此时显示没有更多，不能加载第3页了

pages/debug/3-04-nomore-wrong-after-refresh.vue