小程序随笔10:列表下拉刷新Toast显示加载效果

小程序列表下拉上拉加载数据的方式很多种。
上一篇是结合导航栏loading显示正在加载的效果。请参考地址：https://www.jianshu.com/p/a1903cb4e1be
本篇利用本地假数据结合wx.showToast来展示。
注意：列表实现前面文章中已实现，本篇只特别注明修改的地方。请参考地址：https://www.jianshu.com/p/44b07a86c8ff。

实现方法：
1、在小程序app.json文件中，对应的window下添加代码：

"enablePullDownRefresh": true,

2、在小程序页面对应的.js文件中，数据初始化部分，newList后面添加totalList用于展示当前列表的所有数据。

const newList = new Array(10).fill(0)
var totalList = newList;

3、在小程序页面对应的.js文件中，添加data:

data: {
    list:totalList,
    pageNum: 1,       // 设置加载的第几次，默认是第一次
    pageTotalNum:2,   // 设置总共的分页数
  },

4、在小程序页面对应的.js文件Page下添加onPullDownRefresh和onReachBottom方法。

//上拉加载更多
  onReachBottom:function(params) {
    this.data.pageNum += 1;
    if(this.data.pageNum > this.data.pageTotalNum){
        wx.showToast({
          title: '没有数据了',
        })
        return
    }
    wx.showToast({
      title: '加载更多',
      icon:"loading"
    })
    wx.request({
      url: 'https://wwww.test.com',
      complete: res=>{
        var templist = new Array(totalList.length + 10).fill(0)
        for (let index = 0; index < totalList.length; index++) {
          templist[index] = totalList[index];
        }
        for (let i = totalList.length; i < templist.length; i++) {
          templist[i] = {
            idx: i+1,
            nickname: `nickname${i+1}`,
            datetime: `datetime${i+1}`,
            last_content: `内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容`,
            head_img_url: imgUrlList[(i) % 5],
          }
        }
        totalList = templist;
        this.setData({
          list:totalList,
          pageNum:this.data.pageNum
        })
        wx.hideToast();
      }
    })
  },

  //下拉刷新
  onPullDownRefresh:function(options) {
    wx.showToast({
      title: 'loading...',
      icon:"loading"
    })
    wx.request({
      url: 'https://wwww.test.com',
      complete: res=>{
        wx.hideToast();
        wx.stopPullDownRefresh()
        totalList = null;
        totalList = newList;
        this.setData({
          list:totalList,
          pageNum:1
        })
        console.info(totalList.length);
      }
    })
  },

此项目主要是本地假数据结合wx.showToast显示正在加载的效果，随笔记录，不喜勿喷。