在智能小程序的開(kāi)發(fā)過(guò)程中，上拉加載是一種十分常見(jiàn)的加載效果，最近也收到了一些開(kāi)發(fā)者在開(kāi)發(fā)上拉加載時(shí)遇到的問(wèn)題，今天的內(nèi)容就為您介紹一下如果想實(shí)現(xiàn)下述效果的上拉加載，我們需要如何去做。

以下是為大家總結(jié)的四種常見(jiàn)的實(shí)現(xiàn)方式：

使用 onReachBottom 實(shí)現(xiàn)

智能小程序提供了onReachBottom，即頁(yè)面上拉觸底事件的處理函數(shù)。可以拿在 Page 中定義 onReachBottom 處理函數(shù)，監(jiān)聽(tīng)該頁(yè)面用戶上拉觸底事件，從而實(shí)現(xiàn)上拉加載。

為方便大家直接使用看到效果，將下述代碼片段，直接導(dǎo)入開(kāi)發(fā)者工具中運(yùn)行查看即可：

swanide://fragment/7e944c0c3785bbdf4437c672dd0dc8e41584413934361

代碼解析

swan 文件是每個(gè)智能小程序頁(yè)面的展現(xiàn)模板，類似于 Web 開(kāi)發(fā)中的 HTML，所以我們先在 swan 文件中設(shè)置商品的展現(xiàn)樣式：

{{item.title}}

努力加載中...

復(fù)制代碼

在 js 文件中使用onReachBottom事件，當(dāng)頁(yè)面滑動(dòng)到頁(yè)面底部時(shí)，請(qǐng)求下一頁(yè)展示數(shù)據(jù)，即實(shí)現(xiàn)上拉加載的效果。

...

...

onReachBottom() {

//觸底時(shí)繼續(xù)請(qǐng)求下一頁(yè)展示的數(shù)據(jù)

this.initData();

}

復(fù)制代碼

使用 scroll-view 組件實(shí)現(xiàn)

利用 scroll-view 組件實(shí)現(xiàn)上拉加載也是一種十分常見(jiàn)的方法，實(shí)現(xiàn)步驟與使用onReachBottom事件類似。

scroll-view是百度智能小程序提供的組件，可實(shí)現(xiàn)試圖區(qū)域的橫向滾動(dòng)和豎向滾動(dòng)。使用它的bindscrolltolower屬性，當(dāng)頁(yè)面滾動(dòng)到底部或右邊的時(shí)候，則會(huì)觸發(fā)scrolltolower事件，從而實(shí)現(xiàn)上拉加載的效果。

為方便大家直接使用看到效果，將下述代碼片段，直接導(dǎo)入開(kāi)發(fā)者工具中運(yùn)行查看即可：

swanide://fragment/fccd71b098a7d3921b9958ccd9dba1071584414516291

代碼解析

在 swan 文件中使用 scroll-view 組件，設(shè)置商品的展現(xiàn)樣式。當(dāng)頁(yè)面滑動(dòng)至底部時(shí)，觸發(fā)scrolltolower事件，實(shí)現(xiàn)試圖區(qū)域的豎向滾動(dòng)。

```

class="scrollview"

scroll-y

bindscrolltolower="scrolltolower"

>

{{item.title}}

努力加載中...

```

復(fù)制代碼

使用信息流模板實(shí)現(xiàn)上拉加載

信息流模版是百度智能小程序提供的組件，可配置上拉刷新、列表加載、上拉加載功能，適用于列表信息展示，并可放置在頁(yè)面的任何部分。

與其它組件功能不同，使用信息流模板時(shí)需執(zhí)行下述命令行，引入頁(yè)面模板。

npm i @smt-ui-template/page-feed

復(fù)制代碼

并在進(jìn)入page-feed文件夾后，執(zhí)行下述命令行安裝所有模板依賴。

npm i

復(fù)制代碼為方便大家直接使用看到效果，將下述代碼片段，直接導(dǎo)入開(kāi)發(fā)者工具中運(yùn)行查看即可：

swanide://fragment/71af2b7f470b29b13f792c417fc5f03c1588757790402

代碼解析

在 swan 文件中使用信息流模板，通過(guò) smt-spin 組件加載更多數(shù)據(jù)。

class="smt-feed pull-down-refresh"

pull-to-refresh

bind:scrolltolower="scrollToLower"

text="{{text}}"

style="height: 100vh"

>

{{item.title}}

復(fù)制代碼在js文件中，利用在smt-spin組件上綁定的事件，實(shí)現(xiàn)加載更多的數(shù)據(jù)。

...

...

async scrollToLower() {

const goods = await this.initData();

await syncSetData(this, {

goods: goods.concat(this.data.goods || [])

});

},

...

...

復(fù)制代碼

使用 swiper 組件配合 onReachBottom 實(shí)現(xiàn)上拉加載

使用 swiper 組件配合 onReachBottom 的實(shí)現(xiàn)方法也比較常見(jiàn)，相較上邊兩種實(shí)現(xiàn)方式有些復(fù)雜，但同時(shí)也可以實(shí)現(xiàn)更加復(fù)雜的上拉加載場(chǎng)景。

swiper 組件是智能小程序提供的滑塊視圖組件，與 swiper-item 組件配合使用，可實(shí)現(xiàn) swiper 組件內(nèi) swiper-item 的滑動(dòng)。需要?jiǎng)討B(tài)設(shè)置 swiper 組件的高度，來(lái)保證每次滑動(dòng)到底時(shí)都能觸發(fā) onReachBottom 。

為方便大家直接使用看到效果，將下述代碼片段，直接導(dǎo)入開(kāi)發(fā)者工具中運(yùn)行查看即可：

swanide://fragment/20e8fd8c561418df7c4f24a850bf43461585224391100

代碼解析

根據(jù)實(shí)際場(chǎng)景需要在 swan 文件中設(shè)置 tab，當(dāng)設(shè)置多個(gè)tab時(shí)，實(shí)現(xiàn)效果如下：

Tab1

Tab2

復(fù)制代碼在 swan 文件中使用 swiper、swiper-item 組件。

{{item.title}}

努力加載中...

{{item.title}}

努力加載中...

復(fù)制代碼在 js 文件中設(shè)置 swiper 組件的高度。

// 給image添加load事件，保證圖片全部加載出來(lái)再計(jì)算swiper-item的高度并賦值給swiper

imageLoad() {

let len = this.data.goods.length;

this.setData({

imgLoadNum: ++ this.data.imgLoadNum

})

if(this.data.imgLoadNum === len){

this.queryNodeInfo();

}

},

// 設(shè)置swiper的高度，如果不動(dòng)態(tài)設(shè)置swiper的高度，當(dāng)頁(yè)面滑動(dòng)到底部時(shí)，不會(huì)觸發(fā)onReachBottom

queryNodeInfo: function(){

let currentTab = this.data.currentTab;

swan.createSelectorQuery().selectAll('.item').boundingClientRect((rect) => {

this.setData({

swiperH: rect[currentTab].height + 'px'

})

}).exec();

}

復(fù)制代碼在 js 文件中使用onReachBottom事件，當(dāng)頁(yè)面滑動(dòng)到頁(yè)面底部時(shí)，請(qǐng)求下一頁(yè)展示數(shù)據(jù)，即實(shí)現(xiàn)上拉加載的效果。

onReachBottom() {

this.initData();

},

復(fù)制代碼

總結(jié)

使用方法 1、2、3 可快速實(shí)現(xiàn)簡(jiǎn)單頁(yè)面的上拉加載；而使用方法 4 可實(shí)現(xiàn)頁(yè)面中存在多個(gè) tab 的場(chǎng)景，比如：最新、最熱列表的切換。開(kāi)發(fā)者可根據(jù)實(shí)際情況選擇不同的實(shí)現(xiàn)方法。

最后，感謝各位開(kāi)發(fā)者積極投身百度小程序的開(kāi)發(fā)當(dāng)中，在開(kāi)發(fā)過(guò)程中有任何問(wèn)題都可以在社區(qū)與官方或其他開(kāi)發(fā)者進(jìn)行互動(dòng)，也可將您的意見(jiàn)發(fā)送郵件至smartprogramtech@baidu.com，期待您的參與！

總結(jié)

以上是生活随笔為你收集整理的swiper 上滑触发_四种方式快速实现上滑触底加载效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。