小程式中下拉刷新頁面的功能怎麼實現？

小程式中下拉刷新頁面的功能怎麼實現？以下這篇文章跟大家介紹一下微信小程式介面下拉刷新實作方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

微信小程式中，透過下拉刷新頁面是基本操作，在目前頁面排滿的情況下繼續下拉載入更多內容。小程式和網頁都可以實現這項功能，不同的是小程式介面有能實現下拉刷新功能的API，只要從系統呼叫即可。

透過查看微信開發文件可知，enablePullDownRefresh 這個屬性設定為true。就預設開啟了下拉刷新。 enablePullDownRefresh可以寫在app.json 中和頁面的xxx.json，兩者的區別是，app.json 是全域型的下拉刷新，而***.json 是單一頁面的下拉刷新，只能設定window相關的設定項，以決定本頁面的視窗表現，所以無需寫window這個鍵。另一種方法是，監聽scroll-view,自訂下拉刷新，scroll-view裡面有一個bindscrolltoupper屬性，當滾動到頂部/左邊，會觸發 scrolltoupper 事件，所以我們可以利用這個屬性，來實現下拉刷新功能。

兩種方法都可以，第一種比較簡單，易上手，畢竟一些邏輯系統已經給你處理好了，第二種適合那種想要自訂下拉刷新樣式的小程序，我們講解電商，就用第一種，系統提供的就好，主要是教大家怎麼用。

1. home.json 參數配置

enablePullDownRefresh: true

我們哪個頁面需要下拉刷新，就在哪個頁面對應的xxx.json文件配置上面屬性,這個屬性從字面意思也可以知道，是否允許下拉刷新，當然，如何你不想一個個配置允許下拉刷新，你可以直接在全域變數app.json的window裡面配置上面這個屬性，這樣整個專案都允許下拉刷新了,這個一定要加的，因為系統預設是不具備下拉刷新功能的

home.js

//下拉刷新
onPullDownRefresh:function()
{
wx.showNavigationBarLoading() //在标题栏中显示加载
//模拟加载
setTimeout(function()
{
// complete
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
},1500);
},

onPullDownRefresh 下拉刷新事件監聽，具體看一下裡面的程式碼，wx.showNavigationBarLoading() 與wx.hideNavigationBarLoading() 這兩句話是用來控制小菊花的顯示和隱藏，由於我們現在還沒有講解網絡請求，所以我就模擬了一下網絡加載，通過setTimeout方法，寫一個時間延遲的方法，這個方法可以模擬網路載入所消耗的時間，還有就是當網路載入完成我們要停止下拉刷新wx.stopPullDownRefresh() 。

載入更多

實作載入更多也同理有兩種方式

1. 呼叫系統的API

2. 監聽scroll-view，bindscrolltolower滑動到底部的監聽

處理方式和下拉刷新略有不同，不過也大同小異。

home.js

onReachBottom: function () {
console.log(\'加载更多\')
setTimeout(() => {
this.setData({
isHideLoadMore:true,
recommends: [
{
goodId: 7,
name:\'.....\',
url: \'....\',
imageurl:\'......\',
},
{
goodId: 10,
name:\'......\',
url:\'......\',
},
],
})
}, 1000)
}

onReachBottom系統提供的觸底事件的監聽，和下拉刷新一樣，我們也是模擬一些數據，加了一個時間延遲的事件，isHideLoadMore，一個自定義的值，用來控制顯示和隱藏載入控制項

home.wxml

正在載入

小程式中可以實作下拉刷新的方法還還有其他，可以模仿H5網頁的做法，但微信小程式因為API介面的使用，在實現下拉刷新功能的時候就可以減輕開發人員負擔。

推薦：《小程式開發教學》

以上是小程式中下拉刷新頁面的功能怎麼實現？的詳細內容。更多資訊請關注PHP中文網其他相關文章！