1. 程式人生 > >微信小程式開發中列表頁載入下一頁以及下拉重新整理 實現方法

微信小程式開發中列表頁載入下一頁以及下拉重新整理 實現方法

 微信小程式開發中列表頁載入下一頁以及下拉重新整理 實現方法,微信列表頁常用功能有下拉重新整理,上劃載入更多,怎麼實現呢?

直接上程式碼吧:

列表頁js

global.p = 1

var url = getApp().globalData.API_URL +'/api/index.php?m=jk&c=newslist';

var GetList = function (that) {

  //console.log(global.p)

  that.setData({

    hidden: false,

  });

  wx.request({

    url: url,

    data: {

      pageSize: 10,

      pageNo: global.p

    },

    success: function (res) {

      function toDate(number) {

        var n = number * 1000;

        var date = new Date(n);

        var Y = date.getFullYear() + '/';

        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';

        var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();

        return (Y + M + D)

      }

      var l = that.data.list

      for (var i = 0; i < res.data.length; i++) {

        res.data[i].pubdate = toDate(res.data[i].pubdate),

          l.push(res.data[i])

      }

      //console.log(l)

      that.setData({

        list  : l

      });

      global.p++;

      //console.log(global.p)

      wx.stopPullDownRefresh();

      that.setData({

        hidden: true

      });

    }

  });

}

Page({

  data: {

    list: [],

  },

  onLoad: function (options) {

    // 頁面初始化 options為頁面跳轉所帶來的引數  

    var that = this

    GetList(that)

     wx.request({

       url: getApp().globalData.API_URL +'/api/index.php?m=jk&c=nlmlist',

      success:function(res){

        that.setData({

          nlmlist:res.data

        })

      }

    })

  },

  onPullDownRefresh: function () {

    //下拉  

    console.log("下拉");

    global.p = 1;

    this.setData({

      list: [],

    });

    var that = this

      GetList(that)

  },

  onReachBottom: function () {

    //上拉  

    console.log("上拉")

    var that = this

      GetList(that)

  }

}) 

<div 0px"="" style="padding: 0px; list-style-type: none; margin: 10px; color: rgb(89, 104, 120); background-color: rgb(252, 253, 253);">微信小程式開發中列表頁載入下一頁以及下拉重新整理 實現方法