下拉刷新功能
1.首先要在pages.json里面配置,给你要实现下拉刷新的页面增添这个字段,让页面支持下拉刷新。
"enablePullDownRefresh": true
预览效果:
我们开启了下拉刷新的这个功能,这时候是不是就需要去监听一下,下拉刷新这个动作了。
2. onPullDownRefresh 是一个处理函数,监听该页面用户下拉刷新事件(和onLoad等生命周期函数同级)
onPullDownRefresh () {
console.log('用户发生了下拉刷新')
}
效果预览:
3.我们来实现一个简单的小功能,就是当用户下拉刷新的时候更新数据,从而更新视图。
代码:
{{item}}
我们发现下拉刷新结束后,圈圈还在转,看着难受是不是?想要阻止它转圈圈是不是?莫慌。
3. uni.stopPullDownRefresh()这个函数来了,它就是下拉刷新完成后,视图已经显示,不需要再继续转圈圈了,它的功能就是阻止我们转圈圈的,停止当前页面下拉刷新。
onPullDownRefresh () {
this.PoetsList = ['李白','杜甫','李贺','白居易']
uni.stopPullDownRefresh()
}
效果预览:
你可能发现了,下拉刷新后,转圈圈立马就结束了,就这种转瞬即逝一眨眼的效果,很影响用户体验是不是?
4.setTimeout()来帮你实现下拉刷新延迟,实现完美的用户微调体验。
效果预览:
代码修改:
onPullDownRefresh () {
setTimeout(() => {
this.PoetsList = ['李白','杜甫','李贺','白居易']
uni.stopPullDownRefresh()
},1500)
}
到这里,我们基本可以发现我们都是用户手动去下拉刷新实现的,而且还是页面型的,那有没有触发型的呢?也是有的哦!
5. uni.startPullDownRefresh(OBJECT) 支持方法调用。开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
我们先来看下效果预览:
代码:
{{item}}
如果使用方法定义的下拉刷新,那么pages.json中配置的下拉刷新功能的就不需要了。
但方法定义的下拉刷新是否却了一点东西?是不是少了那个会动会转转的小图标?这好像也很影响用户视觉体验呢?还是有法子的哟。
6.uni-app的button组件自带一个loading的会转圈圈的属性,它是个布尔值判断类型,所以需要再data里面定义绑定一个布尔判断。
效果预览:
代码:
{{item}}
通过上面这些案例的剖析,你是不是一下子多了很多奇思妙想,赶快行动吧,比如:我们可以实现下拉刷新视图了哦!
比如很多的资讯类的app:拿今日头条app来说,下拉刷新这个功能,用户拉一下,就蹦跶出几条新闻,用户又拉一下。就又蹦跶出几条新闻,我们是不是可以实现了呢?。
7.综合案例
待续
上拉加载功能
onReachBottom 监听页面上拉触底,页面滚动到底部的事件,常用于下拉下一页数据。与method同级。
实行条件:页面要有一定的高度,右侧出现滚动条为止,不然没法子触发onReachBottom函数的。
最直接的方法给大容器增加一个高度样式 height:100vh;
有了一定的高度,我们就可以触发它了(与method同级)。
onReachBottom:function(){
console.log('页面触底了哦!')
},
效果预览:
既然这个onReachBottom方法已经正常启用了,那么我们是不是可以实现一些功能了呢?比如上拉的时候,让页面加载更多的数据呢?嗯呢!就是这个样子。
细心的我们会发现,滚动条还未真正触碰到底部的时候,就已经触发了onReachBottom方法?这诗为什么?
我来揭谜底吧,其实这一小段距离其实是受 onReachBottomDistance 这个页面配置参数的影响,默认是距离底部50距离。
官方解释:
上面提到了onReachBottomDistance 是页面配置参数,所以理所应当是在pages.json里面配置了。
找到你所在的页面进行配置。
我们改成当前页面距离底部还有200px的时候触发触底事件。
预览效果:
我们发现细微挪动一下还没开始上挪滚动条就触发了触底事件了,效果很明显,而这个效果就是受到onReachBottomDistance 页面配置参数的影响。
接下来我们来看一些具体的小案例,实行上拉预处理加载更多数据,然后显示到视图上。
案例代码:
{{item}}
上面没看懂的话,也可以用push()方法,实现的效果是一样的。