快捷導(dǎo)航

小程序使用scroll-view實現(xiàn)一個滑動列表功能

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

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

滑動區(qū)域

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

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

上面是針對我的場景計算的高度，具體計算掘友們可以根據(jù)實際元素高度，運用CSS變量運算，將100vh減去其他元素的高度，而需要注意的是這種情況是你不適應(yīng)自定義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ā)刷新的函數(shù)

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

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

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

this.setData({
                isPull: false
            })

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

觸底加載

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

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

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

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

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