小程序上拉加載scroll-view組件實(shí)現(xiàn)方法

根據(jù)官方文檔得知，scroll-view就是里面內(nèi)容有各種滑動觸發(fā)事件的p容器，比如滾動條滾動、觸底、觸頂著三個(gè)事件。

其中的三個(gè)屬性  scroll-top：設(shè)置滾動條的位置

，scroll-y：是否允許豎向滑動，height:是組件的高度

Bindscrolltolower是綁定觸底觸發(fā)的事件

Bindscroll  是滾動觸發(fā)的時(shí)間

Bindscrolltoupper  觸頂觸發(fā)的事件,由于是觸頂觸發(fā)事件，所以不合適用來當(dāng)做下拉刷新

一般來說  對于組件的屬性，都是通過JS來動態(tài)控制的。

<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" bindscrolltolower="bindDownLoad" bindscroll="scroll">

    這里面可以加一些loading 組件 和 需要遍歷的數(shù)據(jù)

</scroll-view>

這里面我們要用到的就是 Bindscrolltolower 事件 來實(shí)現(xiàn)我們的 上拉加載。

下面我們來說說如何實(shí)現(xiàn)：

首先我們需要把 page 頁碼設(shè)置為全局變量  let page

然后再 bindDownLoad 函數(shù)里面進(jìn)行 page++ 的賦值

bindDownLoad：function(){

    page++

    wx.request({

        //這里面的東西就不詳細(xì)說了 大家應(yīng)該能在API中找到

        主要說一下 在我們成功的獲取到data 的時(shí)候 需要我們在success 成功回調(diào)里面去動態(tài)的push 我們所獲取到的新的

        data  然后 setData 給我們 的dataList 這樣就不會出現(xiàn)每次加載完成都是新數(shù)據(jù)而舊數(shù)據(jù)被銷毀的情況。

        還有一點(diǎn)需要注意的就是當(dāng)數(shù)據(jù)獲取到最后一條數(shù)據(jù)以后 需要 進(jìn)行一個(gè)if 判斷 或者 switch 判斷

    })

}

簡單的介紹了一下 上拉加載  需要大家上機(jī)測試，祝你們成功！