实战教程：微信小程序上拉刷新最佳实践

一、为什么需要上拉刷新

在微信小程序中，通常展示的数据量较大，用户需要费力地向下滑动才能看到最新的内容。而使用上拉刷新的功能可以大大提高用户的体验。上拉刷新是指当用户滑动到列表底部时，页面会自动刷新，并在列表最后添加新的数据，避免了用户不断向下滑动的不便。

二、如何实现微信小程序上拉刷新

实现微信小程序上拉刷新官方提供了两种方法：scroll-view 和 page-scroll。scroll-view是在一个view组件中，page-scroll是在一个page页面中。下面我们以scroll-view为例，简单介绍一下如何实现上拉刷新。

<scroll-view class="scroll" scroll-y="true" scroll-with-animation="true" 
        upper-threshold="50" lower-threshold="50" 
        bindscrolltoupper="upper" bindscrolltolower="lower">
    <!-- 列表数据 -->
</scroll-view>

其中，scroll-view需要设置 scroll-y="true" 属性，设置竖向滚动。upper-threshold 和 lower -threshold属性分别表示距离顶部和底部多少距离时触发，bindscrolltoupper 和 bindscrolltolower 是触发事件对应的回调函数。当用户滚动到列表的顶部或者底部时，就会自动触发 upper 或者 lower 回调函数。

Page({
  data: {
    list: []
  },
  // 上拉加载更多
  lower: function () {
    // 获取新的数据
    let newList = getMoreData(); 
    let list = this.data.list.concat(newList);
    this.setData({
      list: list
    })
  }
})

在代码中，我们绑定了页面的 lower 回调函数，函数里面获取新的数据并将其添加到原列表之后再更新页面的数据。

三、上拉刷新的优化处理

1. 防止多次重复请求：当用户向上拉动列表滑动时，上拉事件会被频繁触发，可能会导致多次重复请求相同数据，导致请求失败。为了避免这种情况，我们可以在请求的时候给每个请求一个标识，当请求成功后，检查当前标识是否和请求标识一致，如果不一致，说明请求已经被取消，不需要进行数据展示。

let flag = true; // 是否正在请求数据
let requestFlag = 0; // 请求的标识
Page({
  data: {
    list: []
  },
  // 上拉加载更多
  lower: function () {
    if (!flag) {
      return;
    }
    flag = false;
    requestFlag++;
    let oldList = this.data.list;
    let newList = getMoreData();
    newList = newList.filter(item => {
      return item.flag === requestFlag;
    });
    flag = true;
    let list = oldList.concat(newList);
    this.setData({
      list: list
    })
  }
})

在上面的代码中，我们使用跟踪标识的方式来避免多次重复请求。同时设置 flag 标记来确保只有当一次请求完成后才可以开始下一次请求。

2. 在加载时添加过渡动画效果，提高用户体验：上拉加载更多数据时，我们建议页面显示加载中的动画，同时需要禁止用户进行其他操作，以保证数据的安全性。使用 wx.showLoading 和 wx.hideLoading 方法即可实现全局加载动画显示。

Page({
  data: {
    list: []
  },
  // 上拉加载更多
  lower: function () {
    wx.showLoading({
      title: '玩命加载中',
      mask: true
    })
    let oldList = this.data.list;
    let newList = getMoreData();
    let list = oldList.concat(newList);
    this.setData({
      list: list
    }, () => {
      wx.hideLoading();
    })
  }
})

在列表请求数据的时候，设置 wx.showLoading 显示全局加载动画，在数据返回后再调用 wx.hideLoading 关闭全局加载动画。