微信小程序无后台的下拉刷新和上拉加载

无后台的下拉刷新和上拉加载

1.上拉加载和下拉刷新需要在json页面中配置开启下拉刷新"enablePullDownRefresh":true和"onReachBottomDistance":60设置页面上拉触底事件触发时距页面底部距离，单位为px。如果不设置上拉触底的话默认是50px
2.首先先写一个公共方法，代码如下：

xx:function(){
    var list=[];
    var li={};
    var pa=0
    if(page!=1){
      pa=page-1
      var list=this.data.list
    }
    for(var i=(pa*10);i< page*10;i++){
      li={
        id:i+1,
        img: "../../img/sw.jpg",
        title: "标题"+(i+1),
        content: "内容"+(i+1),
        num: (i+1),
        time: "9:00",
        isCheck:false
      }
      list.push(li)
      console.log(list)
    }
    this.setData({
      list:list
    })
  },

3 在页面初始化中写入第一页需要加载的内容`在这里插入

onLoad: function () {
     var list=[]
    var li=[]
    for(var i=0;i<10; i++){
      li[i]=
      {
      id:'1'+i,
      img:"../../img/sw.jpg",
      title:"标题"+(i+1),//因为i是从0开始所以需要加1
      content:"内容1",
      num:0,
      time:"9:00"
      }
      list.push(li[i])//把每次循环到的li的值数组添加到list数组中
    }
    console.log(list)
    this.setData({
      list:list
    })
  },

3.下拉刷新页面实现，在下拉事件中调用公共方法，并使它的页数重置为1

  page=1   //页数
    let t=this
    wx.showLoading({
      title: '加载中',
    })
    setTimeout(function(){
      wx.hideLoading({
        success(){
          t.xx()
        }
      })
      wx.stopPullDownRefresh();
    },1000)

4.上拉加载

onReachBottom: function () {
     page++
     let t=this
     wx.showLoading({
       title: '加载中',
     })
     setTimeout(function(){
       wx.hideLoading({
         success(){
           t.xx()
         }
       })
     },1000)