下拉刷新功能

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

"enablePullDownRefresh": true

预览效果：

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

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

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

效果预览：

代码：

<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 是页面配置参数，所以理所应当是在pages.json里面配置了。

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

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

预览效果:

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

案例代码：

<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>