uniapp上拉加载

uniapp的上拉加载和下拉刷新一样都有两个方法, 一个是整体的上拉(生命周期函数onReachBottom), 一个是局部的上拉(基于scrpll-view组件);

一.整个页面的上拉(onReachBottom)

注意: 使用scroll-view导致页面级没有滚动，则触底事件不会被触发

onReachBottom() {//当数组里的数据大于等于total的时候,说明数据已经加载完了if (this.dataList.length >= this.total) {setTimeout(() => {this.status = 'noMore'}, 1000)} else {//每次上拉加载的数据比上一次多十个this.current++this.status = 'loading'let that = thissetTimeout(() => {that.getData()}, 1000)}
},
methods:{getData(){let data={current: this.current,size: this.size}uni.request({url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。data:data,header: {'custom-header': 'hello' //自定义请求头信息},success: (res) => {if (res.success) {//下拉刷新的时候将数组置空if (this.pull) {this.dataList = []}this.total = res.totalfor (let i = 0; i < res.rows.length; i++) {this.dataList.push(res.rows[i])}}this.pull = falsethis.status = 'noMore'}});}
}

二.局部上拉(@scrolltolower)

整体上拉onReachBottom和局部上拉@scrolltolower里的代码提现一样

上拉触发不了的原因:(参考不能触发下拉加载)

scroll-view组件是局部的滚动, 如果只滚动整个页面, scroll不滚动到底, 就不会触发局部的上拉
scroll-view组件里的数据太少, 不能进行滚动.
没有给scroll固定高
没有用view将scroll包裹住
使用了overflow:hidden
没有设置scroll-y

uniapp上拉加载的避坑指南相关推荐

uni-app 上拉加载函数 onReachBottom 不触发
记一次问题解决记录. 问题:uni-app 上拉加载函数不触发. 首先我已经在 pages.json 文件中配置了 enablePullDownRefresh 为 true,且配置正确. {" ...
上拉加载你这个坑货~
前两天刚做的一个项目,需要用上拉加载的方式去请求数据.我原以为这会是很简单的,肯定分分钟写完(不过确实也挺简单的),只不过还是坑了我一些的. 坑一 $(window).scroll(function( ...
uniapp 上拉加载更多完整实现源码
直接上代码 <template><view class="searchList"><Search></ ...
better-scroll 实现下拉刷新、上拉加载的那些坑
简介 better-scroll 是一款近几年移动端常用的插件,重点解决移动端(已支持PC)各种滚动场景需求的插件.可以实现竖向滚动效果,也可以实现横向滚动的效果.它不仅可以做普通的滚动列表,还可以做 ...
uni-app 数据上拉加载更多功能
实现上拉加载更多打开项目根目录中的 pages.json 配置文件,为 subPackages 分包中的商品 goods_list 页面配置上拉触底的距离: "subPackages&qu ...
用vant框架做H5时踩过的坑（下拉刷新、上拉加载等）
用vant框架做H5时踩过的坑 1. 页面在手机端不能上下滑动,在PC端浏览器正常滑动说明:在设置了overflow:auto;属性的前提下,H5页面在PC端浏览器里展示可以上下滑动,在ios上可正 ...
关于uniapp的下拉刷新，上拉加载的使用
uniapp 是基于vue生态的,兼容多端的解决方案的一个框架. 其编码风格和原生的信微信小程序有极为相似. uniapp可以轻松实现下拉刷新和上拉加载的效果,在实际应用中,对于我们对列表的分页处理, ...
uni-app下拉刷新、上拉加载更多实现
下拉刷新下拉刷新文档在 js 中定义 onPullDownRefresh 处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件. 需要在 pages.json 里,找到的当前页 ...
uniapp 实现上拉加载
1.page.json中,将 enablePullDownRefresh 设置为 true {"path": "pages/home/communityNews" ...

uniapp上拉加载的避坑指南

uniapp上拉加载

一.整个页面的上拉(onReachBottom)

二.局部上拉(@scrolltolower)

上拉触发不了的原因:(参考不能触发下拉加载)

uniapp上拉加载的避坑指南相关推荐

最新文章

热门文章