一、首先，固定乙個包含列表資料的view高度，讓它裡面列表的資料溢位可以滾動：
scroll-y lower-threshold="100" bindscrolltolower="scrolltolower" style="height: 100vh;">
wx:for="}" wx:key="}" style="height: 40px;line-height: 40px;border-bottom: 1px solid #f4f4f4;">
item}
>
>
//請求資料
getdata(ispage)
//請求
network.pagedata(params,(res,err)=>)
} else )}})
},
//到達底部
scrolltolower: function (e) )
this.getdata(true);
},
四、以上便是基本的上拉載入。通過以上步驟會出現幾個問題，下面提供解決方法：
1、滾動離底部<100px之後，繼續往底部滾動會一直發起請求。我們需要在view距離到底部還有100px時,設定乙個全域性變數loading，告訴大家我已經發起請求了，等我請求返回的資料展示到頁面之後才可以再次發起請求。將步驟三的**改成以下：
//到達底部
scrolltolower: function (e) )
this.getdata(true);}},
步驟二的**改為：
//請求資料
getdata(ispage)
//請求
network.pagedata(params,(res,err)=>)
if (ispage) )
} else )}})
},
2、如果最後一頁的資料都請求完了，再繼續往下滾動還會發起請求。設定乙個全域性變數nomore，當我請求返回的陣列長度為0時，滾動到底部就不用再發起請求了。將步驟三的**改成以下：
//到達底部
scrolltolower: function (e) )
this.getdata(true);}},
步驟二的**改為：
//請求資料
getdata(ispage)
//請求
network.pagedata(params,(res,err)=>)
if (ispage) )
} else )
}if (res.result.length == 0) )}})
},
五、我們接下來完善請求失敗的情況，步驟二的**改為：
//請求資料
getdata(ispage)
//請求
network.pagedata(params,(res,err)=>)
if (err) )
return false;
}if (res.code == 0) )
} else )
}if (res.result.length == 0) )
}} else )}})
},
步驟一的html**修改如下：
scroll-y lower-threshold="100" bindscrolltolower="scrolltolower" style="height: 100vh;">
wx:for="}" wx:key="}" style="height: 40px;line-height: 40px;border-bottom: 1px solid #f4f4f4;">
item}
>
style="text-align: center;margin: 10px;">
wx:if="}">載入中...>
wx:if="}">沒有更多了》
wx:if="}">資料載入失敗,請重試》
>
>
微信小程式 上拉載入
oa系統中，領導要對員工的的申請進行審批，如此多的員工，不可能一下子都顯示出來，需要後台進行分頁，每次上拉觸底載入一頁，每次上拉觸底載入一頁。注 因為各方面原因，不能上傳源 只提供思路和偽 data onload function options onreachbottom function ini...
小程式上拉載入下拉重新整理
筆者這邊上拉載入使用的函式是 onreachbottom，沒有使用scroll view data 生命週期函式 監聽頁面載入 onload function options 商品 goods function that,urls function error 頁面上拉觸底事件的處理函式 onrea...
微信小程式上拉載入更多
一般上拉載入更多用於資料太多，一次載入完成資料卡頓，差不多就是乙個分頁的功能，寫法很簡單，首頁data資料中先定義乙個page為1，第一次進入頁面呼叫介面將為1的page傳給後台，隨後在小程式自帶的onreachbottom函式中操作 onreachbottom function 顯示載入圖示 wx...