小程序使用scroll-view實現一個滑動列表功能

更新時間：2022年08月04日 11:24:52 作者：豬痞惡霸

scroll-view可實現一個可滾動的視圖區(qū)域,下面這篇文章主要給大家介紹了關于小程序使用scroll-view實現一個滑動列表功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

滑動區(qū)域

使用scroll-view來固定可視區(qū)域，但是有一個關鍵性問題就是需要明確可視區(qū)域的高度，為了使頁面固定，用戶在可視區(qū)域滑動，不會產生溢出而導致頁面不固定的問題，就需要根據頁面的元素計算可視覺區(qū)域的高度。

.home-page-info {
    height: calc(100vh - 508rpx);
    overflow:scroll
}

上面是針對我的場景計算的高度，具體計算掘友們可以根據實際元素高度，運用CSS變量運算，將100vh減去其他元素的高度，而需要注意的是這種情況是你不適應自定義tabbar如果使用自定義tabbar則需要去考慮到不同機型的問題。

下拉刷新

scroll-view的下拉刷新與頁面的下拉刷新不同，需要在屬性上開啟刷新

<scroll-view class="home-page-info" scroll-y="true" refresher-enabled="true" refresher-triggered="{{isPull}}" bindrefresherrefresh="onPull"></scroll-view>

refresher-enabled可以開啟自定義下拉刷新，refresher-triggered控制刷新狀態(tài)，bindrefresherrefresh是觸發(fā)刷新的函數

一般來講是在開啟自定義刷新后，通過刷新函數異步控制數據請求與刷新狀態(tài)

onPull() {
        let count = this.data.count
        this.loadPresences(1,count)
},

上面是觸發(fā)的請求函數，我將下面的代碼放在了請求回調中，控制刷新狀態(tài)。

this.setData({
                isPull: false
            })

這樣完成了下拉刷新的功能，總結來看就是搭配refresher的幾個屬性來控制刷新的整個過程：開始刷新，刷新中請求數據，結束刷新

觸底加載

scroll-view的觸底加載和頁面的觸底加載也不同，是靠屬性實現

<scroll-view class="home-page-info" scroll-y="true" refresher-enabled="true" refresher-triggered="{{isPull}}" bindrefresherrefresh="onPull" bindscrolltolower="onDown"></scroll-view>

bindscrolltolower是觸底加載觸發(fā)的函數，在內進行數據的請求，一般觸底加載可以加動畫來使交互更加舒服，而還需要注意的是觸底加載需要考慮到重復請求的問題，當網絡有延遲，你多次觸底會觸發(fā)多次請求，而觸底加載一般是依靠分頁和合并數組來實現數據的延續(xù)，重復請求相同數據會造成問題，所以一般可以加攔截器來校驗重復請求

補充：scroll-view 組件有很多屬性，常用的有：

enable-flex，是否啟用flex布局，只有啟用，display:flex才會生效。布爾值，默認是false，即默認不啟用flex布局。
scroll-x，是否允許橫向滾動。布爾值，默認是false，即默認不允許橫向滾動。
scroll-y，是否允許豎向滾動。布爾值，默認是false ，即默認不允許豎向滾動。使用豎向滾動時，需要給scroll-view設置一個固定的高度，即通過wxss設置height，單位是rpx或px。
scroll-into-view，自動滾動到指定元素的位置上。它的值是scroll-view的子元素的id，id為字符串類型，且不能以數字開頭。
scroll-with-animation，滾動條滾動時是否使用動畫過渡。布爾值，默認值是false，即滾動時默認不使用動畫過渡。