uni-app实现页面下拉刷新功能和上拉加载更多的案例(干货详解)。

下拉刷新功能

1.首先要在pages.json里面配置,给你要实现下拉刷新的页面增添这个字段,让页面支持下拉刷新。

"enablePullDownRefresh": true

预览效果:



我们开启了下拉刷新的这个功能,这时候是不是就需要去监听一下,下拉刷新这个动作了。


2. onPullDownRefresh 是一个处理函数,监听该页面用户下拉刷新事件(和onLoad等生命周期函数同级)

onPullDownRefresh () {
            console.log('用户发生了下拉刷新')
        }

效果预览:


3.我们来实现一个简单的小功能,就是当用户下拉刷新的时候更新数据,从而更新视图。

代码:




我们发现下拉刷新结束后,圈圈还在转,看着难受是不是?想要阻止它转圈圈是不是?莫慌。


3. uni.stopPullDownRefresh()这个函数来了,它就是下拉刷新完成后,视图已经显示,不需要再继续转圈圈了,它的功能就是阻止我们转圈圈的,停止当前页面下拉刷新。

onPullDownRefresh () {
            this.PoetsList = ['李白','杜甫','李贺','白居易']
            uni.stopPullDownRefresh()
        }

效果预览:



你可能发现了,下拉刷新后,转圈圈立马就结束了,就这种转瞬即逝一眨眼的效果,很影响用户体验是不是?


4.setTimeout()来帮你实现下拉刷新延迟,实现完美的用户微调体验。
效果预览:

代码修改:

onPullDownRefresh () {
            setTimeout(() => {
                this.PoetsList = ['李白','杜甫','李贺','白居易']
                uni.stopPullDownRefresh()
            },1500)
        }

到这里,我们基本可以发现我们都是用户手动去下拉刷新实现的,而且还是页面型的,那有没有触发型的呢?也是有的哦!


5. uni.startPullDownRefresh(OBJECT) 支持方法调用。开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。

我们先来看下效果预览:


代码:




如果使用方法定义的下拉刷新,那么pages.json中配置的下拉刷新功能的就不需要了。



但方法定义的下拉刷新是否却了一点东西?是不是少了那个会动会转转的小图标?这好像也很影响用户视觉体验呢?还是有法子的哟。


6.uni-app的button组件自带一个loading的会转圈圈的属性,它是个布尔值判断类型,所以需要再data里面定义绑定一个布尔判断。

效果预览:


代码:




通过上面这些案例的剖析,你是不是一下子多了很多奇思妙想,赶快行动吧,比如:我们可以实现下拉刷新视图了哦!

比如很多的资讯类的app:拿今日头条app来说,下拉刷新这个功能,用户拉一下,就蹦跶出几条新闻,用户又拉一下。就又蹦跶出几条新闻,我们是不是可以实现了呢?。


7.综合案例
待续


上拉加载功能

onReachBottom 监听页面上拉触底,页面滚动到底部的事件,常用于下拉下一页数据。与method同级。

实行条件:页面要有一定的高度,右侧出现滚动条为止,不然没法子触发onReachBottom函数的。

最直接的方法给大容器增加一个高度样式 height:100vh;





有了一定的高度,我们就可以触发它了(与method同级)。

onReachBottom:function(){
            console.log('页面触底了哦!')
        },

效果预览:



既然这个onReachBottom方法已经正常启用了,那么我们是不是可以实现一些功能了呢?比如上拉的时候,让页面加载更多的数据呢?嗯呢!就是这个样子。


细心的我们会发现,滚动条还未真正触碰到底部的时候,就已经触发了onReachBottom方法?这诗为什么?


我来揭谜底吧,其实这一小段距离其实是受 onReachBottomDistance 这个页面配置参数的影响,默认是距离底部50距离。


官方解释:

上面提到了onReachBottomDistance 是页面配置参数,所以理所应当是在pages.json里面配置了。


找到你所在的页面进行配置。


我们改成当前页面距离底部还有200px的时候触发触底事件。


预览效果:


我们发现细微挪动一下还没开始上挪滚动条就触发了触底事件了,效果很明显,而这个效果就是受到onReachBottomDistance 页面配置参数的影响。


接下来我们来看一些具体的小案例,实行上拉预处理加载更多数据,然后显示到视图上。


案例代码:







上面没看懂的话,也可以用push()方法,实现的效果是一样的。


你可能感兴趣的:(uni-app实现页面下拉刷新功能和上拉加载更多的案例(干货详解)。)