小白学习微信小程序的下拉刷新和上拉加载更多

小白学习微信小程序的下拉刷新和上拉加载更多内容

一、下拉刷新 下拉刷新是指在页面顶部向下拖动页面时触发的刷新操作，用于更新页面内容。

1. 在微信小程序的wxml页面文件中，我们需要添加一个scroll-view组件来实现下拉刷新的效果。

<scroll-view scroll-y="{{true}}" bindscrolltolower="loadMore" bindrefresherrefresh="refresh" refresher-enabled="{{true}}" refresher-threshold="45">
  <!-- 页面内容 -->
</scroll-view>

上述代码中，我们通过设置scroll-view组件的属性来实现下拉刷新。其中，scroll-y="{{true}}"表示开启纵向滚动，bindscrolltolower="loadMore"表示当滚动到底部时触发加载更多函数loadMore，bindrefresherrefresh="refresh"表示当下拉刷新时触发刷新函数refresh，refresher-enabled="{{true}}"表示开启下拉刷新功能，refresher-threshold="45"表示下拉刷新的临界值。

1. 在微信小程序的js逻辑文件中，我们需要定义刷新函数refresh和加载更多函数loadMore。

Page({
  data: {
    // 初始化数据
    dataList: [],
    // 是否显示加载更多的loading
    showLoading: false,
    // 是否显示无更多数据提示
    showNoMore: false
  },

  // 刷新函数
  refresh: function() {
    // 请求数据
    this.getDataList();
  },

  // 加载更多函数
  loadMore: function() {
    // 判断是否正在加载更多或已经没有更多数据
    if (this.data.showLoading || this.data.showNoMore) {
      return;
    }
    // 显示加载更多的loading
    this.setData({
      showLoading: true
    });
    // 请求数据
    this.getDataList();
  },

  // 请求数据
  getDataList: function() {
    // 发起数据请求
    wx.request({
      url: 'https://api.example.com/data',
      success: (res) => {
        // 请求成功后的处理逻辑
        // 如果是刷新操作，清空数据列表，否则追加数据
        let newDataList = this.data.showLoading ? res.data : this.data.dataList.concat(res.data);
        // 判断是否还有更多数据
        let showNoMore = res.data.length < 10;
        // 更新数据列表、是否显示加载更多的loading和是否显示无更多数据提示的状态
        this.setData({
          dataList: newDataList,
          showLoading: false,
          showNoMore: showNoMore
        });
        // 请求成功后结束下拉刷新的操作
        wx.stopPullDownRefresh();
      },
      fail: (res) => {
        // 请求失败后的处理逻辑
        // 隐藏加载更多的loading
        this.setData({
          showLoading: false
        });
        // 请求失败后结束下拉刷新的操作
        wx.stopPullDownRefresh();
      }
    });
  }
})

上述代码中，我们定义了一个Page对象，并在data中初始化了数据，包括数据列表dataList、是否显示加载更多的loading showLoading和是否显示无更多数据提示 showNoMore。接着，我们定义了刷新函数refresh和加载更多函数loadMore，分别对应下拉刷新和上拉加载更多的操作。在getDataList函数中，我们使用wx.request发起数据请求，并根据请求的结果更新数据列表、是否显示加载更多的loading和是否显示无更多数据提示的状态。请求成功或失败后，我们使用wx.stopPullDownRefresh()结束下拉刷新的操作。

二、上拉加载更多 上拉加载更多是指在页面底部向上滑动时触发的加载更多操作，用于加载下一页或更多数据。

1. 在微信小程序的wxml页面文件中，我们需要在scroll-view组件中添加一个底部的loading提示。

<scroll-view scroll-y="{{true}}" bindscrolltolower="loadMore" bindrefresherrefresh="refresh" refresher-enabled="{{true}}" refresher-threshold="45">
  <!-- 页面内容 -->
  <!-- 底部加载更多提示 -->
  <view wx:if="{{showLoading}}" class="load-more">加载中...</view>
  <view wx:if="{{showNoMore}}" class="no-more">没有更多数据了</view>
</scroll-view>

上述代码中，我们通过使用wx:if条件渲染来控制加载更多提示的显示与隐藏。当showLoading为true时，显示加载中...的提示；当showNoMore为true时，显示没有更多数据了的提示。我们可以自定义相关样式来美化显示效果。

1. 在微信小程序的wxss样式文件中，我们可以为上述加载更多的提示添加一些样式。

.load-more, .no-more {
  text-align: center;
  padding: 10rpx;
  color: #999;
}

上述代码中，我们为加载更多和没有更多数据的提示添加了居中对齐、内边距和灰色文字的样式。

至此，我们就完成了微信小程序的下拉刷新和上拉加载更多的实现。在实际应用中，我们可以根据具体需求进行适当的优化和调整，例如：添加加载失败时的处理逻辑、显示加载更多的loading时禁止再次触发加载更多等。希望上述内容对你有所帮助，如果还有其他问题，请随时提问。