前言： 近期架构开发小程序时 ， 项目收尾整体流程测试发现 ， 滑动嵌套列表加载更多时候 ， 如果用户快速滑动列表加载会导致页面空白或者直接卡死 ， 官方文档不建议使用滚动趋势线长列表加载 ， 中不用 ， 高度计算不准确 ， list又不太好触发滑到底部事件 ， 反反复复各种优化各种改 ， 最终在z-自定义中把这个问题处理掉了 ， 效果跟需求几乎满足百分之九十五以上 。↓↓↓↓↓↓ 如下效果
上滑加载下拉刷新
【解决uniapp列表快速滑动页面数据空白问题】下拉刷新上滑加载组件
【z-下拉刷新、上拉加载】高性能 ， 全平台兼容 。支持虚拟列表 ， 支持nvue、vue3 -插件市场 超简单、低耦合！使用wxs+实现 。支持长列表优化 ， 支持自定义下拉刷新、上拉加载更多 ， 支持自动管理空数据图、点击返回顶部 ， 支持聊天分页、本地分页 ， 支持国际化等100+项配置
文章插图
{{ item.content_row.title }}{{item.content_row.description.replace(/\s+/g, "")}}{{ item.content_row.created }}/* 注意:父节点需要固定高度 ， z-paging的height:100%才会生效 */.content {height: 100%;padding-top: 280rpx;}.item {position: relative;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;}/* css */.content {overflow: hidden;width: 100%;}.closedbox image {width: 20rpx;}.content .loding {overflow: hidden;height: 68rpx;background: #f8f8f8;width: 100%;display: flex;align-items: center;justify-content: center;}.content .loding image {width: 24rpx;border-radius: 50%;animation: turn 2s linear infinite;}.content .loding .span {font-size: 22rpx;color: #999999;margin-left: 10rpx;}.fadeins {width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);position: fixed;left: 0;top: 0;z-index: 999;}.select_box {width: 100%;height: 1rpx;border-top: 1px solid #efefef;display: flex;align-items: center;/* // z-index: 9999; */background: #fff;position: relative;}.main_science {overflow: hidden;padding: 0rpx 30rpx 0 30rpx;}.ul {overflow: hidden;}.ul .li:last-child {border: none;}.ul .li {overflow: hidden;display: flex;padding: 40rpx 0;box-sizing: border-box;display: flex;align-items: flex-start;justify-content: space-between;border-bottom: 1px solid #f1f1f1 !important;}.ul .li .font {overflow: hidden;width: 365rpx;}.ul .li .font .p {font-size: 32rpx;color: #333333;line-height: 42rpx;display: block;margin-bottom: 34rpx;}.ul .li .font .span {display: block;font-size: 26rpx;color: #9a9ca0;}.ul .li .fontwenzi {overflow: hidden;width: 100%;}.ul .li .fontwenzi .title {font-size: 33rpx;color: #333333;line-height: 42rpx;display: block;margin-bottom: 34rpx;}.ul .li .fontwenzi .info {font-size: 26rpx;color: #8c8c8c;line-height: 42rpx;display: block;margin-bottom: 34rpx;}.ul .li .fontwenzi .span {display: block;font-size: 26rpx;color: #9a9ca0;}.ul .li .pic {overflow: hidden;width: 260rpx;border-radius: 20rpx;}.ul .li .pic image {display: block;width: 100%;}
页面中使用调用
