1.需要用到的元件和api
2.需要用到的屬性
3.scrol-view需要指定乙個高度，這個高度可以按自己的需求計算，我使用的是螢幕可用高度並且預設一頁顯示6個
4.滾動到底部繫結需要觸發的事件
<5.操作事件函式，主要是將請求下來的資料用concat方法進行合併，然後賦值，我是用的for迴圈假裝新增的資料，實際專案中可以換成自己的ajax，並且為了模擬載入我新增了乙個1.5秒的定時器，先呼叫提示框api成功之後關閉scroll-view
scroll-y
='true'
style
="height:}px"
bindscrolltolower='lower'
>
lower() ;6.成功，放完整**可以直接複製執行var cont =result.concat(resarr);//合併請求的資料
console.log(resarr.length);
if (cont.length >= 100) );
return
false
; }
else
); settimeout(() =>);
wx.hideloading();
}, 1500)}}
wxml**
<js**view
class
='box'
>
<
scroll-view
scroll-y
='true'
style
="height:}px"
bindscrolltolower
='lower'
>
<
view
wx:for
="}"
data-id
="}"
wx:key
="}"
style
="height:}px;width:100%;text-align:center;line-height:}px; border-bottom:1px solid #ccc"
>}
view
>
scroll-view
>
view
>
page(,lower() ;
var cont =result.concat(resarr);
console.log(resarr.length);
if (cont.length >= 100) );
return
false
; }
else
); settimeout(() =>);
wx.hideloading();
}, 1500)}},
/** * 生命週期函式--監聽頁面載入
*/onload:
function
(options) )}})
}})
微信小程式分頁載入更多
lower threshold 100 設定觸底高度 true lower threshold 100 bindscrolltolower scrolltolower for wx for item item wx key title font color 特別事項 view text view b...
微信小程式上拉載入更多
一般上拉載入更多用於資料太多，一次載入完成資料卡頓，差不多就是乙個分頁的功能，寫法很簡單，首頁data資料中先定義乙個page為1，第一次進入頁面呼叫介面將為1的page傳給後台，隨後在小程式自帶的onreachbottom函式中操作 onreachbottom function 顯示載入圖示 wx...
微信小程式 下拉重新整理 上滑載入更多
index.wxss page 生命週期函式 監聽頁面載入 onload 頁面相關事件處理函式 監聽使用者下拉動作 onpulldownrefresh this.setdata this.loaddata 頁面上拉觸底事件的處理函式 onreachbottom this.loaddata 請求資料封...