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

這篇文章主要介紹“小程序怎么實(shí)現(xiàn)上拉加載scroll-view組件”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“小程序怎么實(shí)現(xiàn)上拉加載scroll-view組件”文章能幫助大家解決問(wèn)題。

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

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

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

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

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

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

一般來(lái)說(shuō)  對(duì)于組件的屬性，都是通過(guò)JS來(lái)動(dòng)態(tài)控制的。

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

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

</scroll-view>

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

下面我們來(lái)說(shuō)說(shuō)如何實(shí)現(xiàn)：

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

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

bindDownLoad：function(){

    page++

    wx.request({

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

        主要說(shuō)一下 在我們成功的獲取到data 的時(shí)候 需要我們?cè)趕uccess 成功回調(diào)里面去動(dòng)態(tài)的push 我們所獲取到的新的

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

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

    })

}

關(guān)于“小程序怎么實(shí)現(xiàn)上拉加載scroll-view組件”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。