滑動(dòng)列表是每個(gè)應(yīng)用必不可少的部分，而實(shí)現(xiàn)也是一件復(fù)雜的事情，根據(jù)上面的動(dòng)圖實(shí)現(xiàn)一個(gè)滑動(dòng)列表，需要考慮到如下幾點(diǎn)。

• 列表的滑動(dòng)區(qū)域
• 列表的下拉刷新
• 列表的觸底加載

下面我將從這三點(diǎn)來(lái)帶大家具體如何實(shí)現(xiàn)一個(gè)完整的滑動(dòng)列表

滑動(dòng)區(qū)域

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

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

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

下拉刷新

scroll-view的下拉刷新與頁(yè)面的下拉刷新不同，需要在屬性上開(kāi)啟刷新

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

refresher-enabled可以開(kāi)啟自定義下拉刷新，refresher-triggered控制刷新?tīng)顟B(tài)，bindrefresherrefresh是觸發(fā)刷新的函數(shù)

一般來(lái)講是在開(kāi)啟自定義刷新后，通過(guò)刷新函數(shù)異步控制數(shù)據(jù)請(qǐng)求與刷新?tīng)顟B(tài)

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

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

this.setData({
                isPull: false
            })

這樣完成了下拉刷新的功能，總結(jié)來(lái)看就是搭配refresher的幾個(gè)屬性來(lái)控制刷新的整個(gè)過(guò)程：開(kāi)始刷新，刷新中請(qǐng)求數(shù)據(jù)，結(jié)束刷新

觸底加載

scroll-view的觸底加載和頁(yè)面的觸底加載也不同，是靠屬性實(shí)現(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ù)的請(qǐng)求，一般觸底加載可以加動(dòng)畫(huà)來(lái)使交互更加舒服，而還需要注意的是觸底加載需要考慮到重復(fù)請(qǐng)求的問(wèn)題，當(dāng)網(wǎng)絡(luò)有延遲，你多次觸底會(huì)觸發(fā)多次請(qǐng)求，而觸底加載一般是依靠分頁(yè)和合并數(shù)組來(lái)實(shí)現(xiàn)數(shù)據(jù)的延續(xù)，重復(fù)請(qǐng)求相同數(shù)據(jù)會(huì)造成問(wèn)題，所以一般可以加攔截器來(lái)校驗(yàn)重復(fù)請(qǐng)求

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

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

總結(jié)

到此這篇關(guān)于小程序使用scroll-view實(shí)現(xiàn)一個(gè)滑動(dòng)列表功能的文章就介紹到這了,更多相關(guān)scroll-view實(shí)現(xiàn)滑動(dòng)列表內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論