小程式實現上拉載入，例項程式碼
阿新 • • 發佈：2018-11-08
小程式實現上拉載入，例項程式碼
最近在做一個小程式，想實現下拉重新整理的功能，剛開始就遇到了一個尷尬的問題，原因是不認真o(╥﹏╥)o
下面是通過摸索總結出的步驟，給尋找問題的同伴提供參考:
下拉重新整理分為全域性和單頁面的：
全域性的設定就是在 app.js 中的 Windows 設定 “enablePullDownRefresh”:true,
單頁面的設定 是在你想要應用的頁面 js中設定 “enablePullDownRefresh”:true,
官方文件
連結：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE
下拉載入 觸發時有相應的函式 這個函式在你建立小程式模板時會自動生成，在頁面的 js 頁面中 不需要自己寫
// pages/ces/ces.js
Page({
/**
* 頁面的初始資料
*/
data: {
},
/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function (options) {
},
/**
* 生命週期函式--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函式--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函式--監聽頁面隱藏
*/ 就在這裡面，
找到需要呼叫的函式之後就可以傳送請求，載入需要的資料
下面是我的一個例子
Page({
/**
* 頁面的初始資料
*/
data: {
page:1,
/**
*這是初始的分頁 頁碼
*/
},
/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function (options) {
},
/**
* 生命週期函式--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函式--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函式--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函式--監聽頁面解除安裝
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函式--監聽使用者下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函式
*/
onReachBottom: function () {
var that=this;
wx.showNavigationBarLoading()
var pages=that.data.page;
pages+=1;
/**
*每次重新整理pages就加1
*/
wx.request({
url: 'https://xxxx?page='+pages,
success:function(data){
setTimeout(function(){
var ps = data.data.data;
that.setData({
products:ps
})
}, 1000)
},
complete: function () {
setTimeout(function () {
// complete
wx.hideNavigationBarLoading() //完成停止載入
wx.stopPullDownRefresh() //停止下拉重新整理
}, 1000)
}
})
},
/**
* 使用者點選右上角分享
*/
onShareAppMessage: function () {
}
})好啦，這樣上拉載入就寫好了。