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

为何须要上拉加载和下拉刷新？

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

须要下拉刷新也是咱们以为现有的内容都看完了知足不了心中的指望了，因此下拉试试，碰巧下拉看到了新的内容，很开心~（比上面的图好看一些的效果图以下）

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

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

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

第二种：监听 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 组件的属性文档地址：developers.weixin.qq.com/miniprogram…

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 文档地址 developers.weixin.qq.com/miniprogram…

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. 系统下拉刷新，自定义上拉加载，一、2结合使用