小程序怎么實現上拉加載scroll-view組件

這篇文章主要介紹“小程序怎么實現上拉加載scroll-view組件”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“小程序怎么實現上拉加載scroll-view組件”文章能幫助大家解決問題。

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

其中的三個屬性  scroll-top：設置滾動條的位置

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

Bindscrolltolower是綁定觸底觸發的事件

Bindscroll  是滾動觸發的時間

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

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

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

    這里面可以加一些loading 組件 和 需要遍歷的數據

</scroll-view>

這里面我們要用到的就是 Bindscrolltolower 事件 來實現我們的 上拉加載。

下面我們來說說如何實現：

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

然后再 bindDownLoad 函數里面進行 page++ 的賦值

bindDownLoad：function(){

    page++

    wx.request({

        //這里面的東西就不詳細說了 大家應該能在API中找到

        主要說一下 在我們成功的獲取到data 的時候 需要我們在success 成功回調里面去動態的push 我們所獲取到的新的

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

        還有一點需要注意的就是當數據獲取到最后一條數據以后 需要 進行一個if 判斷 或者 switch 判斷

    })

}

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