微信小程序实现上拉和下拉加载更多

桃扇骨 2024-02-19 18:45 82阅读 0赞

在上一篇文章中，我们知道了使用 scroll-view 可以实现上拉加载更多，但是由于 scroll-view 的限制，它无法实现下拉加载更多，这篇文章我们使用 view 组件来实现 上拉和下拉加载更多。

### **下拉加载更多：** ###

1、在响应的 **xxx.json** 配置文件依次配置如下配置

>> enablePullDownRefresh:true 表示开启下拉刷新

>> backgroundTextStyle 下拉 loading 的样式，仅支持 dark/light

>> backgroundColor 窗口的背景色

2、上方后面2个没有设置好，在下拉时，页面顶部会出现一块白色的区域。

3、在下拉刷新时，**不可使用 wx.showLoading 提示**（其余的提示我没有测试），否则在 ios 下页面回弹过多，导致看不到顶部的那个提示页面刷新的区域。

4、页面下拉会触发 **onPullDownRefresh** 事件

5、防止 **onPullDownRefresh** 多次触发，导致多次请求

### 上拉加载更多： ###

1、在对应的 xxx.json 中配置(不是必须的)

>> onReachBottomDistance 页面上拉触底事件触发时距页面底部距离，单位为px

2、页面上拉在小于或等于 onReachBottomDistance 的距离时，会触发 **onReachBottom** 事件

### 实现效果： ###

![aHR0cDovL2RsMi5pdGV5ZS5jb20vdXBsb2FkL2F0dGFjaG1lbnQvMDEzMC8xNjYyLzgxZTc4YmEwLTdkNTktMzE5OC1iZGU1LWNmMWQwMGMzNDcxYS5naWY][]

## 代码实现： ##

### 1、页面布局 loadMore.wxml 文件的编写 ###

<view class='view-container'>
      <block wx:for='{
       {articles}}' wx:key='{
       {item.id}}'>
        <view class='articles-container'>
          <view class='info'>
            <image class='avatar' src='{
       {item.avatar}}'></image>{
       {item.nickname}}
            <text class='created-at'>{
       {item.created_at}}</text>
            <text class='category'>{
       {item.category}}</text>
          </view>
        </view>
      </block>
      <view class='data-loading' hidden='{
       {hidden}}'>
        数据加载中...
      </view>
    </view>

### 2、样式编写 loadMore.wxss 文件的编写 ###

.view-container {
      background-color: #fff;
    }
    
    .data-loading {
      height: 100rpx;
      line-height: 100rpx;
      background-color: #eee;
      text-align: center;
      font-size: 14px;
    }
    
    .articles-container {
      border-bottom: 1px solid #eee;
      margin: 30rpx 10rpx;
      background-color: #eee;
    }
    
    .articles-container .info {
      font-size: 12px;
      margin: 20rpx 0rpx;
      height: 100%;
      display: inline-block;
    }
    
    .articles-container .info .avatar {
      width: 60rpx;
      height: 60rpx;
      margin-right: 10rpx;
      border-radius: 60rpx;
      display: inline-block;
      vertical-align: middle;
    }
    
    .articles-container .info .created-at {
      margin: 0px 20rpx;
      display: inline-block;
      vertical-align: middle;
    }
    
    .articles-container .info .category {
      color: #3399ea;
      display: inline-block;
      vertical-align: middle;
    }

### 3、js 控制 loadMore.js 文件的编写 ###

Page({
    
      data: {
        /**
         * 需要访问的url
         */
        urls: [
          'https://www.csdn.net/api/articles?type=more&category=home&shown_offset=0',
          'https://www.csdn.net/api/articles?type=new&category=arch',
          'https://www.csdn.net/api/articles?type=new&category=ai',
          'https://www.csdn.net/api/articles?type=new&category=newarticles'
        ],
        /**
         * 当前访问的url索引
         */
        currentUrlIndex: 0,
        /**
         * 获取到的文章
         */
        articles: [],
        /**
         * 控制上拉到底部时是否出现 "数据加载中..."
         */
        hidden: true,
        /**
         * 数据是否正在加载中，避免数据多次加载
         */
        loadingData: false
      },
    
      onLoad: function(options) {
        this.loadData(false);
      },
    
      /**
       * 加载数据
       */
      loadData: function(tail, callback) {
        var that = this,
          urlIndex = that.data.currentUrlIndex;
        wx.request({
          url: that.data.urls[urlIndex],
          success: function(r) {
            var oldArticles = that.data.articles,
              newArticles = tail ? oldArticles.concat(r.data.articles) : r.data.articles;
            that.setData({
              articles: newArticles,
              currentUrlIndex: (urlIndex + 1) >= that.data.urls.length ? 0 : urlIndex + 1
            });
            if (callback) {
              callback();
            }
          },
          error: function(r) {
            console.info('error', r);
          },
          complete: function() {}
        });
      },
    
      /**
       * 监听用户下拉动作
       */
      onPullDownRefresh: function() {
        console.info('onPullDownRefresh');
        var loadingData = this.data.loadingData,
          that = this;
        if (loadingData) {
          return;
        }
        // 显示导航条加载动画
        wx.showNavigationBarLoading();
        // 显示 loading 提示框,在 ios 系统下，会导致顶部的加载的三个点看不见
        // wx.showLoading({
        //   title: '数据加载中...',
        // });
        setTimeout(function() {
          that.loadData(false, () => {
            that.setData({
              loadingData: false
            });
            wx.stopPullDownRefresh();
            // wx.hideLoading();
            wx.hideNavigationBarLoading();
            console.info('下拉数据加载完成.');
          });
        }, 1000);
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function() {
        console.info('onReachBottom');
        var hidden = this.data.hidden,
          loadingData = this.data.loadingData,
          that = this;
        if (hidden) {
          this.setData({
            hidden: false
          });
          console.info(this.data.hidden);
        }
        if (loadingData) {
          return;
        }
        this.setData({
          loadingData: true
        });
        // 加载数据,模拟耗时操作
    
        wx.showLoading({
          title: '数据加载中...',
        });
    
        setTimeout(function() {
          that.loadData(true, () => {
            that.setData({
              hidden: true,
              loadingData: false
            });
            wx.hideLoading();
          });
          console.info('上拉数据加载完成.');
        }, 1000);
      }
    })

### 4、配置文件 loadMore.json 的编写 ###

{
      "navigationBarTitleText": "上拉刷新和下拉加载更多",
      "enablePullDownRefresh": true,
      "onReachBottomDistance": 0,
      "backgroundTextStyle": "dark",
      "backgroundColor": "#c0d9ff"
    }

### 完整代码： ###

**微信小程序实现上拉和下拉加载更多代码：**[https://gitee.com/huan1993/weixin\_mini\_program\_study/tree/master/pages/view-pull-up-load-more][https_gitee.com_huan1993_weixin_mini_program_study_tree_master_pages_view-pull-up-load-more]

[aHR0cDovL2RsMi5pdGV5ZS5jb20vdXBsb2FkL2F0dGFjaG1lbnQvMDEzMC8xNjYyLzgxZTc4YmEwLTdkNTktMzE5OC1iZGU1LWNmMWQwMGMzNDcxYS5naWY]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/18f8c459bd194893b7cb34ae9e61d229.png
[https_gitee.com_huan1993_weixin_mini_program_study_tree_master_pages_view-pull-up-load-more]: https://gitee.com/huan1993/weixin_mini_program_study/tree/master/pages/view-pull-up-load-more