做者：小花 ,github連接：https://github.com/mengbodi/swan/issues/1html
加入咱們git
更多內容請前往智能小程序開發者社區查看github
在智能小程序的開發過程當中，上拉加載是一種十分常見的加載效果，最近也收到了一些開發者在開發上拉加載時遇到的問題，今天的內容就爲您介紹一下若是想實現上拉加載，咱們須要如何去作。npm
如下是爲你們總結的四種常見的實現方式：小程序
使用 onReachBottom 實現
智能小程序提供了onReachBottom，即頁面上拉觸底事件的處理函數。能夠拿在 Page 中定義 onReachBottom 處理函數，監聽該頁面用戶上拉觸底事件，從而實現上拉加載。windows
爲方便你們直接使用看到效果，將下述代碼片斷，直接導入開發者工具中運行查看便可：
swanide://fragment/7e944c0c3785bbdf4437c672dd0dc8e41584413934361api
代碼解析
-
swan 文件是每一個智能小程序頁面的展示模板，相似於 Web 開發中的 HTML，因此咱們先在 swan 文件中設置商品的展示樣式：async
<view class="goodsList"> <block s-for="item,index in goods"> <view class="goodsItem"> <view class="goodsImage"> <image src="{{item.img}}"></image> </view> <view class="goodsTitle"> <text>{{item.title}}</text> </view> </view> </block> </view> <view class="loading">努力加載中...</view> -
在 js 文件中使用
onReachBottom事件，當頁面滑動到頁面底部時，請求下一頁展現數據，即實現上拉加載的效果。ide... ... onReachBottom() { //觸底時繼續請求下一頁展現的數據 this.initData(); }
更多內容參見onReachBottom
使用 scroll-view 組件實現
利用 scroll-view 組件實現上拉加載也是一種十分常見的方法，實現步驟與使用onReachBottom事件相似。
scroll-view是百度智能小程序提供的組件，可實現試圖區域的橫向滾動和豎向滾動。使用它的bindscrolltolower屬性，當頁面滾動到底部或右邊的時候，則會觸發scrolltolower事件，從而實現上拉加載的效果。
爲方便你們直接使用看到效果，將下述代碼片斷，直接導入開發者工具中運行查看便可：
swanide://fragment/fccd71b098a7d3921b9958ccd9dba1071584414516291
代碼解析
在 swan 文件中使用 scroll-view 組件，設置商品的展示樣式。當頁面滑動至底部時，觸發scrolltolower事件，實現試圖區域的豎向滾動。
```
<view class="intro">
<scroll-view
class="scrollview"
scroll-y
bindscrolltolower="scrolltolower"
>
<view class="goodsList">
<view s-for="item,index in goods">
<view class="goodsItem">
<view class="goodsImage">
<image src="{{item.img}}"></image>
</view>
<view class="goodsTitle">
<text>{{item.title}}</text>
</view>
</view>
</view>
</view>
<view class="loading">努力加載中...</view>
</scroll-view>
</view>
```
使用信息流模板實現上拉加載
信息流模版是百度智能小程序提供的組件，可配置上拉刷新、列表加載、上拉加載功能，適用於列表信息展現，並可放置在頁面的任何部分。
與其它組件功能不一樣，使用信息流模板時需執行下述命令行，引入頁面模板。
npm i @smt-ui-template/page-feed
並在進入page-feed文件夾後，執行下述命令行安裝全部模板依賴。
npm i
爲方便你們直接使用看到效果，將下述代碼片斷，直接導入開發者工具中運行查看便可：
swanide://fragment/71af2b7f470b29b13f792c417fc5f03c1588757790402
代碼解析
- 在 swan 文件中使用信息流模板，經過 smt-spin 組件加載更多數據。
<smt-feed
class="smt-feed pull-down-refresh"
pull-to-refresh
bind:scrolltolower="scrollToLower"
text="{{text}}"
style="height: 100vh" <!-- 信息流組件做爲局部滾動組件，必須在它的父級或自己指定高度 -->
>
<view class="goodsList">
<view s-for="item,index in goods">
<view class="goodsItem">
<view class="goodsImage">
<image src="{{item.img}}"></image>
</view>
<view class="goodsTitle">
<text>{{item.title}}</text>
</view>
</view>
</view>
</view>
<smt-spin status="{{status}}" bind:tap="reload"></smt-spin>
</smt-feed>
- 在js文件中，利用在smt-spin組件上綁定的事件，實現加載更多的數據。
...
...
async scrollToLower() {
const goods = await this.initData();
await syncSetData(this, {
goods: goods.concat(this.data.goods || [])
});
},
...
...
使用 swiper 組件配合 onReachBottom 實現上拉加載
使用 swiper 組件配合 onReachBottom 的實現方法也比較常見，相較上邊兩種實現方式有些複雜，但同時也能夠實現更加複雜的上拉加載場景。
swiper 組件是智能小程序提供的滑塊視圖組件，與 swiper-item 組件配合使用，可實現 swiper 組件內 swiper-item 的滑動。須要動態設置 swiper 組件的高度，來保證每次滑動到底時都能觸發 onReachBottom 。
爲方便你們直接使用看到效果，將下述代碼片斷，直接導入開發者工具中運行查看便可：
swanide://fragment/20e8fd8c561418df7c4f24a850bf43461585224391100
代碼解析
-
根據實際場景須要在 swan 文件中設置 tab，當設置多個tab時，實現效果以下：
<view class="swiper-tab">
<view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swiperNav">Tab1</view>
<view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swiperNav">Tab2</view>
</view>
- 在 swan 文件中使用 swiper、swiper-item 組件。
<swiper class="swiper" style="height: {{swiperH}}" current="{{currentTab}}" bindchange="swiperChange">
<swiper-item class="item">
<view class="goodsList">
<view s-for="item,index in goods">
<view class="goodsItem">
<view class="goodsImage">
<image bindload="imageLoad" src="{{item.img}}"></image>
</view>
<view class="goodsTitle">
<text>{{item.title}}</text>
</view>
</view>
</view>
</view>
<view class="loading">努力加載中...</view>
</swiper-item>
<swiper-item class="item">
<view class="goodsList">
<view s-for="item,index in goods">
<view class="goodsItem">
<view class="goodsImage">
<image src="{{item.img}}"></image>
</view>
<view class="goodsTitle">
<text>{{item.title}}</text>
</view>
</view>
</view>
</view>
<view class="loading">努力加載中...</view>
</swiper-item>
</swiper>
- 在 js 文件中設置 swiper 組件的高度。
// 給image添加load事件，保證圖片所有加載出來再計算swiper-item的高度並賦值給swiper
imageLoad() {
let len = this.data.goods.length;
this.setData({
imgLoadNum: ++ this.data.imgLoadNum
})
if(this.data.imgLoadNum === len){
this.queryNodeInfo();
}
},
// 設置swiper的高度，若是不動態設置swiper的高度，當頁面滑動到底部時，不會觸發onReachBottom
queryNodeInfo: function(){
let currentTab = this.data.currentTab;
swan.createSelectorQuery().selectAll('.item').boundingClientRect((rect) => {
this.setData({
swiperH: rect[currentTab].height + 'px'
})
}).exec();
}
- 在 js 文件中使用
onReachBottom事件，當頁面滑動到頁面底部時，請求下一頁展現數據，即實現上拉加載的效果。
onReachBottom() {
this.initData();
},
總結
使用方法 一、二、3 可快速實現簡單頁面的上拉加載；而使用方法 4 可實現頁面中存在多個 tab 的場景，好比：最新、最熱列表的切換。開發者可根據實際狀況選擇不一樣的實現方法。