微信小程序实现上拉加载下拉刷新

分手后的思念是犯贱 2022-04-23 07:10 406阅读 0赞

**为什么需要上拉加载和下拉刷新？**

需要上拉加载是因为手机一屏已经装不下产品经理天马行空的想法了，当然也是我们想要看到更多的内容，所以上拉加载是一个 App 的必备。（简陋的效果如下）

![加载更多][1240]

需要下拉刷新也是我们觉得现有的内容都看完了满足不了心中的期望了，所以下拉试试，碰巧下拉看到了新的内容，很开心~（比上面的图好看一些的效果图如下）

![下拉刷新][1240 1]

上面两张图是在小程序中实现的上拉加载和下拉刷新效果图。

**在小程序中实现上拉加载和下拉刷新有两种方式**

第一种：使用小程序默认提供方法。

第二种：监听 scroll-view 滑动到顶端和滑动到底端。

**二者的实现各有优缺点：**

第一种：小程序提供的方法，实现简单便捷，但是在使用 scroll-view 之后会上拉加载和下拉刷新失去效果。下拉刷新样式只有系统提供的 三个点闪动效果。而且上拉加载没有样式。

> tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh  
> tip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

第二种：实现相对复杂，但是定制性高，可自由定制 加载的布局。

**第一种方式实现：使用小程序默认提供方法。**

(1). 在xxx.json 中开启下拉刷新，需要设置backgroundColor，或者是backgroundTextStyle ，因为加载的动画可能会是白色背景，会看不清。

{
    
    "enablePullDownRefresh": true,
    
    "backgroundColor": "#f0145a",
    
    "backgroundTextStyle": "dark"
    
    }

(2). 在 js 中处理逻辑

/**
    
       * 下拉刷新
    
       */
    
      onPullDownRefresh: function() {
        // 标题栏显示刷新图标，转圈圈
        wx.showNavigationBarLoading()
    
        console.log("onPullDownRefresh");
    
        // 请求最新数据
        that.getData();
    
        setTimeout(() => {
          // 标题栏隐藏刷新转圈圈图标
          wx.hideNavigationBarLoading()
    
        }, 2000);
    
      },
    
      /**
    
       * 加载更多
    
       */
    
      onReachBottom: function() {
    
        console.log('onReachBottom')
    }

**第二种方式实现：监听 scroll-view 滑动到顶端和滑动到底端。**

scroll-view 组件的属性文档地址：[https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html][https_developers.weixin.qq.com_miniprogram_dev_component_scroll-view.html]

![image][]  
![image][image 1]

wxml 伪代码：

<scroll-view class="scroll-view" scroll-y bindscrolltoupper="refresh" bindscrolltolower="loadMore" >
    
      <view wx:if="{
       {refreshing}}" class='pull_to_refresh'>正在刷新...</view>
    
      <block wx:for="{
       {列表数据}}">
      </block>
    
      <view class="loadmore" wx:if="{
       {isHideLoadMore}}">
        <text>{
       {loadingDesc}}</text>
      </view>
    
    </scroll-view>

js 伪代码：

//下拉刷新监听函数
    refresh: function() {
        wx.showNavigationBarLoading() 
    
        that.setData({
          refreshing: true,
        });
        console.log("下拉刷新开始");
        // 请求数据
        that.getData();
    
        setTimeout(() => {
          wx.hideNavigationBarLoading() 
          // 隐藏下拉刷新的布局
          that.setData({
            refreshing: false,
          });
        }, 2000);
    },
    
    //加载更多监听函数
    loadMore: function() {
    
        //判断是否全部加载完成，显示不同的文本 loadingDesc 
    
        setTimeout(function() {
    
          that.setData({
            // 加载到最后一条可设置一直显示
            isHideLoadMore: false,
            // 加载到最后一条显示提示文本
            loadingDesc: '到底了~'

二者结合：

> 滑动到顶端显示三个点下拉刷新，上拉加载使用自定义的

这里用到 `wx.startPullDownRefresh();` API，主要就是监听 scroll-view 的滑动，当滑动到顶部的时候调用 wx.startPullDownRefresh(); 当滑动到底部调用我们自定义的 loadingMore

**startPullDownRefresh 文档地址**  
[https://developers.weixin.qq.com/miniprogram/dev/api/wx.startPullDownRefresh.html][https_developers.weixin.qq.com_miniprogram_dev_api_wx.startPullDownRefresh.html]

js伪代码如下：

//下拉刷新监听函数
    refresh: function() {
        // 开启下拉刷新
        wx.startPullDownRefresh();
        wx.showNavigationBarLoading() 
    
        console.log("下拉刷新开始");
        // 请求数据
        that.getData();
    
        setTimeout(() => {
          wx.stopPullDownRefresh() //停止下拉刷新
          wx.hideNavigationBarLoading() 
          // 隐藏下拉刷新的布局
          that.setData({
            refreshing: false,
          });
        }, 2000);
    },
    
    //加载更多监听函数
    loadMore: function() {
        //判断是否全部加载完成，显示不同的文本 loadingDesc 
        setTimeout(function() {
          that.setData({
            // 加载到最后一条可设置一直显示
            isHideLoadMore: false,
            // 加载到最后一条显示提示文本
            loadingDesc: '到底了~'
         }）

**总结：**

> 最好是封装成一个加载组件，方便引用。

1.  单个页面，且对刷新样式没要求，使用系统页面提供的方法
2.  下拉刷新，上拉加载样式都改变，使用 scroll-view 组件监听滑动
3.  系统下拉刷新，自定义上拉加载，1、2结合使用

[1240]: /images/20220323/b95f8bc717a64e1f916c899e9857ec47.png
[1240 1]: /images/20220323/3ac01fa33eb64b77bef60abe02d3a8eb.png
[https_developers.weixin.qq.com_miniprogram_dev_component_scroll-view.html]: https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
[image]: /images/20220323/8a19f984838544b3a4d5b22a7b9c418d.png
[image 1]: /images/20220323/fb04560162464ca9859e7c35f04b82dd.png
[https_developers.weixin.qq.com_miniprogram_dev_api_wx.startPullDownRefresh.html]: https://developers.weixin.qq.com/miniprogram/dev/api/wx.startPullDownRefresh.html