微信小程序列表——下拉刷新、上拉加载、返回顶部

文章仅是自己在写代码过程中，总结出来的。本人也是新手小白，如果有更优雅的方法写法，欢迎留言。贴出来的代码都是经过试验的。

微信小程序可使用页面方法做到列表下拉刷新，上拉加载功能。也可以通过<scroll-view>实现列表功能。

一、下拉刷新与上拉加载（用Page本身的方法实现，不是<scroll-view>）

1、配置page中的json，将enablePullDownRefresh设置为true，开启下拉刷新。设置onReachBottomDistance的值，开启上拉加载。

PS：enablePullDownRefresh也可在app.json中进行全局设置。但全局设置会将一些不需要下拉功能的页面变为也可下拉。个人不推荐进行全局配置，在需要下拉操作的page的json中单独加入即可。

// pages/reserve/reserve.json
{
  "navigationBarTitleText": "页面名称",
  "enablePullDownRefresh": true,  //开启下拉刷新
  "backgroundTextStyle":"dark",//下拉刷新的点点颜色，可在app.json中配置
  "onReachBottomDistance": 50//距离底部多远开始加载
}

2、在对应page的js中添加方法，onPullDownRefresh下拉刷新方法、onReachBottom上拉加载方法，是page中自带的。文档位置：框架--注册页面--Page

// pages/reserve/reserve.js  代码我尽量写全，显得有点杂乱，看的时候可以复制下来，不需要的代码自行删除

Page({
  data: {
    username: '',
    password: '',
    page:1,
    hasMoreData: true,//是否还有更多数据
    hasFail: false,//获取列表数据是否出错
    list: []
  },
  onLoad: function (options) {
    // 获取上一页传入的参数
    this.setData({
      username: options.username,
      password: options.password
    });
    this.getList();  //获取列表数据的方法
  },
  onPullDownRefresh: function () {
    //下拉刷新，由于我的列表数据是分页的，所以下拉刷新时，需要将page置为1，再调用获取列表数据的方法
    this.setData({ hasMoreData: true, page: 1 }, () => this.getList());
  },
  onReachBottom: function () {
    //上拉加载，判断是否还有数据，如果没有数据，则不执行获取数据的方法，避免重复无用的调用接口
    this.data.hasMoreData ? this.getList() : null;
  },
  //获取列表数据
  getList: function () {
    let _this = this;
    //加载数据时，提示用户
    wx.showLoading({
      title:"数据加载中...",
      mask:true
    });
    //通过接口获取数据
    wx.request({
      url: config.url.serviceUrl + 'sfbapi/kefuQueryWX',
      data: {
        action: 'List',
        u: this.data.username,
        p: this.data.password,
        page: this.data.page, //分页
        pageSize: 20 //单页数据量
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (ret) {
        //因为是分页加载的列表，因此需要判断，是否是第一页，是则需要将数据清空，否则将之前的列表数据赋值
        let listData = _this.data.page == 1 ? [] : _this.data.list;  
        //接口获取数据成功，将下拉刷新的操作停止（动画停止）
        wx.stopPullDownRefresh();
        //设置数据，将获取到的数据接入之前的数据之后
        _this.setData({
          list: listData.concat(ret.data.list),
          hasFail: false
        });
        //获取的数据条数为0或小于20（20是设置的每页数据条数），则说明之后没有数据了
        if (ret.data.list.length == 0 || ret.data.list.length < 20) {
          _this.setData({ hasMoreData: false });
        } else {
          //否则之后还有数据，将页数加1
          _this.setData({
            hasMoreData: true,
            page: ++_this.data.page
          })
        };
      },
      fail: function () {
        _this.setData({
          hasFail: true
        });
      },
      complete:function(){
        wx.hideLoading();
      }
    })
  }
)}

二、通过API中的wx.pageScrollTo实现返回顶部。

PS：我将返回顶部的wxml写成了一个模板，将以下返回顶部的代码放入了util.js中，比较方便复用。

goTop: function () {
 if (wx.pageScrollTo) { //当滑动距离不为0（不处于顶部时）
    wx.pageScrollTo({
      scrollTop: 0 //设置滑动距离为0
    })
  } else { //版本过低时的兼容操作
    wx.showModal({
      title: '提示',
      content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
    })
  }
}