微信小程序上拉加载更多数据_微信小程序上拉加载数据

在微信小程序中实现上拉加载更多的功能，通常需要使用到onReachBottom生命周期函数。当页面滚动到底部时，该函数会被触发。以下是一个简单的实现上拉加载更多的示例代码：

首先，在页面的.json配置文件中，确保enablePullDownRefresh设置为false，因为我们使用自定义的上拉加载，而不是下拉刷新：

json复制代码

接着，在页面的.wxml文件中，创建你的内容布局：

html代码

<view class="container">  
  <view wx:for="{{listData}}" wx:key="unique">  
    <!-- 这里展示你的列表数据 -->  
    <text>{{item.content}}</text>  
  </view>  
  <!-- 上拉加载更多提示 -->  
  <view wx:if="{{loading}}" class="loading-tip">加载中...</view>  
  <!-- 如果没有更多数据，显示提示 -->  
  <view wx:if="{{noMore}}" class="no-more-tip">没有更多了</view>  
</view>

在页面的.wxss文件中，添加相应的样式：

css代码

.container {  
  /* 容器样式 */  
}  
  
.loading-tip {  
  /* 加载中提示样式 */  
  text-align: center;  
  padding: 20rpx;  
}  
  
.no-more-tip {  
  /* 没有更多数据提示样式 */  
  text-align: center;  
  padding: 20rpx;  
  color: #999;  
}

最后，在页面的.js文件中，编写逻辑代码：

javascript代码

Page({  
  data: {  
    listData: [], // 列表数据  
    page: 1, // 当前页码  
    loading: false, // 是否正在加载  
    noMore: false, // 是否没有更多数据  
  },  
  
  onLoad: function() {  
    this.loadMore(); // 页面加载时请求第一页数据  
  },  
  
  loadMore: function() {  
    if (this.data.loading) {  
      return; // 如果已经在加载，则不再发起请求  
    }  
    if (this.data.noMore) {  
      return; // 如果没有更多数据，则不再发起请求  
    }  
  
    this.setData({  
      loading: true, // 开始加载时设置状态  
    });  
  
    // 假设有一个获取数据的API，这里使用wx.request模拟请求  
    wx.request({  
      url: '你的API地址',  
      data: {  
        page: this.data.page,  
      },  
      success: (res) => {  
        if (res.data.length > 0) {  
          this.setData({  
            listData: this.data.listData.concat(res.data), // 合并新数据到列表数据  
            page: this.data.page + 1, // 页码自增  
            loading: false, // 数据加载完成，设置状态  
          });  
        } else {  
          this.setData({  
            noMore: true, // 没有更多数据，设置状态  
            loading: false, // 数据加载完成，设置状态  
          });  
        }  
      },  
      fail: (err) => {  
        console.error(err);  
        this.setData({  
          loading: false, // 请求失败，设置状态  
        });  
      },  
    });  
  },  
  
  onReachBottom: function() {  
    this.loadMore(); // 当滚动到底部时，加载更多数据  
  },  
});

在上面的代码中，loadMore函数负责发起请求获取更多数据，并在获取成功后更新页面数据。onReachBottom函数在页面滚动到底部时被调用，从而触发加载更多数据的逻辑。

请确保将你的API地址替换为你实际的后端接口地址，并且根据实际的API响应格式来调整数据处理逻辑。

这只是一个基本的实现示例，你可以根据实际需求进行扩展和优化，比如添加错误处理、分页参数传递、加载动画等。

<view class="contentBody">
        <view class="articleItem" wx:for="{{articleList}}" wx:key="articlePublishID" data-row="{{item}}" bind:tap="clickArticle">
          <view class="articleItemName">{{item.name}}</view>
          <view class="articleItemContent">
            {{item.description?item.description:''}}
          </view>
        </view>
        <!-- 上拉加载更多提示 -->
        <view wx:if="{{loading}}" class="loading-tip">加载中...</view>  
        <!-- 如果没有更多数据，显示提示 -->  
        <view wx:if="{{noMore}}" class="no-more-tip">没有更多了</view> 
      </view>

// 点击切换导航
  clickNav(e){
    const row=e.currentTarget.dataset.row
    console.log('row',row.name);
    this.setData({
      articleList:[],
      page:1,
      noMore:false,
      loading:false,
      activeNavID:row.navigatorID,
    })
    this.loadMore()
  },
loadMore() {  
    if (this.data.loading) {  
      return; // 如果已经在加载，则不再发起请求  
    }  
    if (this.data.noMore) {  
      return; // 如果没有更多数据，则不再发起请求  
    }  
    
    this.setData({  
      loading: true, // 开始加载时设置状态  
    });  
    const that = this
    ports.ModuleArticle.getArticlePublishList({
      applicationID: app.applicationID,
      companyID: app.companyID,
      navigatorID: this.data.activeNavID,
      sortTypeStartdate: 2,
      pageNumber: 10,
      currentPage:this.data.page,
    }, that, res => {
      if (res.data.header.code == 0) {
        let obj = res.data.body.data.rows
        if (obj.length > 0) {
          this.setData({  
            articleList: this.data.articleList.concat(obj), // 合并新数据到列表数据  
            page: this.data.page + 1, // 页码自增  
            loading: false, // 数据加载完成，设置状态  
          });  
        } else {  
          this.setData({  
            noMore: true, // 没有更多数据，设置状态  
            loading: false, // 数据加载完成，设置状态  
          });  
        }
      }else{
        this.setData({  
          loading: false, // 请求失败，设置状态  
        });
      }
    })
  },
onReachBottom() {
    this.loadMore(); // 当滚动到底部时，加载更多数据 
  },