下拉刷新功能
1.首先要在pages.json里面配置，给你要实现下拉刷新的页面增添这个字段，让页面支持下拉刷新。
"enablePullDownRefresh": true
预览效果：
我们开启了下拉刷新的这个功能，这时候是不是就需要去监听一下，下拉刷新这个动作了。
2. onPullDownRefresh 是一个处理函数，监听该页面用户下拉刷新事件（和onLoad等生命周期函数同级）
onPullDownRefresh () {
console.log('用户发生了下拉刷新')
}
效果预览：
3.我们来实现一个简单的小功能，就是当用户下拉刷新的时候更新数据，从而更新视图。
代码：
<template>
<view class="container">
<view v-for="(item,index) in PoetsList" :key="index">
{{item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
PoetsList:['苏轼','苏辙','苏洵','柳宗元','辛弃疾']
}
},
onPullDownRefresh () {
this.PoetsList = ['李白','杜甫','李贺','白居易']
}
}
</script>
我们发现下拉刷新结束后，圈圈还在转，看着难受是不是？想要阻止它转圈圈是不是？莫慌。
3. uni.stopPullDownRefresh()这个函数来了，它就是下拉刷新完成后，视图已经显示，不需要再继续转圈圈了，它的功能就是阻止我们转圈圈的，停止当前页面下拉刷新。
onPullDownRefresh () {
this.PoetsList = ['李白','杜甫','李贺','白居易']
uni.stopPullDownRefresh()
}
效果预览：
你可能发现了，下拉刷新后，转圈圈立马就结束了，就这种转瞬即逝一眨眼的效果，很影响用户体验是不是？
4.setTimeout()来帮你实现下拉刷新延迟，实现完美的用户微调体验。
效果预览：
代码修改：
onPullDownRefresh () {
setTimeout(() => {
this.PoetsList = ['李白','杜甫','李贺','白居易']
uni.stopPullDownRefresh()
},1500)
}
到这里，我们基本可以发现我们都是用户手动去下拉刷新实现的，而且还是页面型的，那有没有触发型的呢？也是有的哦！
5. uni.startPullDownRefresh(OBJECT) 支持方法调用。开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
我们先来看下效果预览：
代码：
<template>
<view class="container">
<view class="" v-for="(item,index) in PoetsList" :key="index">
{{item}}
</view>
<button type="primary" @tap="PullDownRefresh()">刷新</button>
</view>
</template>
<script>
export default {
data () {
return {
PoetsList:['苏轼','苏辙','苏洵','柳宗元','辛弃疾']
}
},
methods: {
PullDownRefresh:function(){
setTimeout(() => {
this.PoetsList = ['李白','杜甫','李贺','白居易']
uni.stopPullDownRefresh()
},1500)
}
}
}
</script>
如果使用方法定义的下拉刷新，那么pages.json中配置的下拉刷新功能的就不需要了。
但方法定义的下拉刷新是否却了一点东西？是不是少了那个会动会转转的小图标？这好像也很影响用户视觉体验呢？还是有法子的哟。
6.uni-app的button组件自带一个loading的会转圈圈的属性，它是个布尔值判断类型，所以需要再data里面定义绑定一个布尔判断。
效果预览：
代码：
<template>
<view class="container">
<view class="" v-for="(item,index) in PoetsList" :key="index">
{{item}}
</view>
<button :loading="isLoad" type="primary" @tap="PullDownRefresh()">刷新</button>
</view>
</template>
<script>
export default {
data () {
return {
PoetsList:['苏轼','苏辙','苏洵','柳宗元','辛弃疾'],
isLoad:false
}
},
methods: {
PullDownRefresh:function(){
this.isLoad = true //当用户点击的时候转圈圈
setTimeout(() => {
this.PoetsList = ['李白','杜甫','李贺','白居易','李清照']
uni.stopPullDownRefresh()
this.isLoad = false //1.5秒后停止转圈圈
},1500)
}
}
}
</script>
通过上面这些案例的剖析，你是不是一下子多了很多奇思妙想，赶快行动吧，比如：我们可以实现下拉刷新视图了哦！
比如很多的资讯类的app：拿今日头条app来说，下拉刷新这个功能，用户拉一下,就蹦跶出几条新闻，用户又拉一下。就又蹦跶出几条新闻，我们是不是可以实现了呢？。
7.综合案例
待续
上拉加载功能
onReachBottom 监听页面上拉触底，页面滚动到底部的事件，常用于下拉下一页数据。与method同级。
实行条件:页面要有一定的高度，右侧出现滚动条为止,不然没法子触发onReachBottom函数的。
最直接的方法给大容器增加一个高度样式 height:100vh;
<template>
<view class="container">
</view>
</template>
<style lang="scss" scoped>
.container {
height: 100vh;
}
</style>
有了一定的高度，我们就可以触发它了(与method同级)。
onReachBottom:function(){
console.log('页面触底了哦！')
},
效果预览：
既然这个onReachBottom方法已经正常启用了，那么我们是不是可以实现一些功能了呢？比如上拉的时候，让页面加载更多的数据呢？嗯呢！就是这个样子。
细心的我们会发现，滚动条还未真正触碰到底部的时候，就已经触发了onReachBottom方法？这诗为什么？
我来揭谜底吧，其实这一小段距离其实是受 onReachBottomDistance 这个页面配置参数的影响，默认是距离底部50距离。
官方解释：
上面提到了onReachBottomDistance 是页面配置参数，所以理所应当是在pages.json里面配置了。
找到你所在的页面进行配置。
我们改成当前页面距离底部还有200px的时候触发触底事件。
预览效果:
我们发现细微挪动一下还没开始上挪滚动条就触发了触底事件了，效果很明显，而这个效果就是受到onReachBottomDistance 页面配置参数的影响。
接下来我们来看一些具体的小案例，实行上拉预处理加载更多数据，然后显示到视图上。
案例代码：
<template>
<view class="container">
<view class="" v-for="(item,index) in PoetsList" :key="index">
{{item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
PoetsList:['苏轼','苏辙','苏洵','柳宗元','辛弃疾'],
isLoad:false
}
},
onReachBottom:function(){
console.log('页面触底了哦！')
//在原有数据的基础上，无限推送新数据，这里仅用来测试用途
this.PoetsList = [
...this.PoetsList,
...['郑燮','杜牧','王维','陆游','纳兰性德'],
...['刘禹锡','陶渊明']
]
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.container {
height: 100vh;
width: 750upx;
background-color: #ffff7f;
}
</style>
上面没看懂的话，也可以用push()方法，实现的效果是一样的。
<script>
export default {
data () {
return {
PoetsList:['苏轼','苏辙','苏洵','柳宗元','辛弃疾'],
PoetsList2:['郑燮','杜牧','王维','陆游','纳兰性德']
}
},
onReachBottom:function(){
console.log('页面触底了哦！')
//在原有数据的基础上，无限推送新数据，这里仅用来测试用途
for(let poet of this.PoetsList2) {
this.PoetsList.push(poet)
}
},
methods: {
}
}
</script>
