uni-app中页面的上拉加载与下拉刷新

前端同学在日常搬砖中肯定会写一些下拉刷新上拉加载数据的列表，实现的方式也很多。今天我就从一个前端小白的角度去梳理一下这些上拉下拉的具体实现方式

---

下拉刷新

这个是非常简单的，在pages.json文件中，将想要开启下拉刷新页面中的 enablePullDownRefresh 选项改成true

{
            "path" : "pages/mine/junior",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "绑定用户",
                "navigationStyle": "custom",
                "enablePullDownRefresh": true
            }
            
        }

然后在页面中定义下拉的回调要处理方法 onPullDownRefresh，然后在其中编写具体逻辑即可。

    onPullDownRefresh() {
            //  this.fetchData()     todo
            setTimeout(()=>{
                    uni.stopPullDownRefresh()
            },500)
    },

下拉还是非常简单的。

上拉加载数据方式一 通过页面的回调事件onReachBottom实现

当页面中内容超过可视区域出现滚动条时候，在页面中定义 onReachBottom 事件回调，此时当页面滚动到底部的时候就会触发事件。

    onReachBottom() {
            console.log('到底了')
    },

这样就可以在回调中处理一些加载更多数据的逻辑了。

上面这种方式叫做页面滚动，就是说整个页面都会向上滚动，当触底了以后就可以拉取更多数据。这种方式实现起来简单，但是并不是适合于所有的下拉场景。比如说首页中顶部轮播需要固定住，只有下面一小块区域可以实现滚动，这就是区域滚动

上拉加载数据方式二 通过组件实现区域滚动。

这个组件可能我们就很熟悉了，因为uni-app还不是很普遍，用微信小程序原生开发的时候，做滚动就会去用这个组件。这个组件需要在初始化时候给予一个固定的高度值，这样当里面的内容超出这个高度值的时候，就能触发组件的下拉事件 @scrolltolower但是这个高度值如何去设定也是一个问题，因为不同的手机的屏幕高度是不同的，怎么样去兼容所有的手机会是一个问题。早期我的实现方式一直是通过flex布局。顶部容器给与个固定高度，然后滚动区域给与一个 flex:1的属性进行撑开。但是这不是最好的方式，不同端可能会出现一些兼容问题。推荐的一个做法是通过计算的方式计算出一个合理的高度即可。

篇幅有限，这里只讲解了实现思路，并没给出示例代码，后续补充完善