微信小程序 - 下拉刷新、上拉加载

在小程序开发中使用下拉刷新和上拉加载很是多，好比经常使用的展现型首页，而实现这个功能有两种形式，第一种是使用 scroll-view 组件，第二种是不使用 scroll-view 组件而让整个页面刷新，那就分别都在此简单分享下。

方法一

在 scroll-view 里设定 bindscrolltoupper 和 bindscrolltolower 监听页面滑动到顶部和底部，调用两个方法而后分别根据本身业务逻辑处理便可。

详情见 scroll-view 组件

直接上代码

注意使用竖向滚动时，须要给 <scroll-view/> 一个固定高度才能监听滚动事件，经过 WXSS 设置 height 。

index.wxml

<!--index.wxml-->
<view>
    <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" 
        class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad"  bindscroll="scroll">
        <view class="item" wx:for="{{list}}">
            <image class="img" src="{{item.pic_url}}"></image>
            <view class="text">
                <text class="title">{{item.name}}</text>
                <text class="description">{{item.short_description}}</text>
            </view>
        </view>
    </scroll-view>
    <view class="body-view">
        <loading hidden="{{hidden}}" bindchange="loadingChange">
            加载中...
        </loading>
    </view>
</view>

index.js

var url = "https://xxx";
var page = 1;
var page_size = 5;

// 请求数据
var loadMore = function (that) {
  that.setData({
    hidden: true
  });
  wx.request({
    url: url,
    data: {
      page: page,
      page_size: page_size,
    },
    header: {
        'content-type': 'application/json'
    },
    success: function (res) {
      var list = that.data.list ;
      for(var i = 0; i < res.data.data.length; i++){
          list.push(res.data.data[i]);
      }
      that.setData({
        list: list
      });
      page++;
      that.setData({
        hidden: false
      });
    }
  });
}

Page({
  data: {
    hidden: true,
    list: [],
    scrollTop: 0,
    scrollHeight: 0
  },

  onLoad: function () {
    //注意 scroll-view 必需要设置高度才能监听滚动事件，须要在页面的onLoad事件中给scroll-view的高度赋值
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          scrollHeight: res.windowHeight
        });
      }
    });
    loadMore(that);
  },

  //下拉加载
  bindDownLoad: function () {
    var that = this;
    loadMore(that);
  },

  scroll: function (event) {
    //该方法绑定了页面滚动时的事件，这里记录了当前的 position.y 的值,为了请求数据以后把页面定位到这里来。
    this.setData({
      scrollTop: event.detail.scrollTop
    });
  },

  //上拉刷新
  topLoad: function (event) {
    var that = this;
    //数据刷新
    page = 0;
    this.setData({
      page: 1,
      list: [],
      scrollTop: 0
    });
    loadMore(that);
  }
})

方法二

整个页面的刷新，使用 onPullDownRefresh 和 onReachBottom 。可是在小程序里，用户顶部下拉是默认禁止的，咱们须要把他设置为启用，在 app.json 中的设置对全部页面有效，在单独页面设置则对当前页面有效。

详情见 Page 页面

有人说设置完以后能够下拉，可是看不到图标，须要再设置下拉 loading 样式。

{
  "window":{
    "backgroundTextStyle": "dark",
    "enablePullDownRefresh": true
  }
}

直接上代码

下拉刷新  

// 下拉刷新  
  onPullDownRefresh: function () {
    // 显示顶部刷新图标  
    wx.showNavigationBarLoading();
    var that = this;
    wx.request({
      url: 'https://xxx',
      method: "POST",
      data:{
            page : page,
            page_size : page_size,
      },
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        that.setData({
          moment: res.data.data
        });
        // 设置数组元素  
        that.setData({
          moment: that.data.moment
        });
        // 隐藏导航栏加载框  
        wx.hideNavigationBarLoading();
        // 中止下拉动做  
        wx.stopPullDownRefresh();
      }
    })
  },

上拉加载更多

//上拉加载
  onReachBottom: function () {
    var that = this;
    // 显示加载图标  
    wx.showLoading({
      title: '加载中...',
    })
    page++;;
    wx.request({
      url: 'https://xxx/'，
      method: "POST",
      data:{
            page : page,
            page_size : page_size,
      },
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        // 回调函数  
        var moment_list = that.data.moment;
        for (var i = 0; i < res.data.data.length; i++) {
          moment_list.push(res.data.data[i]);
        }
        // 设置数据  
        that.setData({
          moment: that.data.moment
        })
        // 隐藏加载框  
        wx.hideLoading();
      }
    })

  },

参考以上例子就能够下拉刷新、上拉加载， 示例仅提供一个思路，具体的实现须要开发者根据本身项目来定。

 

水平有限，如有问题请留言交流！

互相学习，共同进步 ：） 转载请注明出处谢谢！