小程序開發中四種方式快速實現上(shàng)拉觸底加載效果 - 新聞資訊 - 雲南小程序開發|雲南軟件開發|雲南網站建設-昆明融晨信息技術有限公司

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不(bù)管是(shì)網站，軟件還是(shì)小程序，都要(yào / yāo)直接或間接能爲(wéi / wèi)您産生價值，我們在(zài)追求其視覺表現的(de)同時(shí)，更側重于(yú)功能的(de)便捷，營銷的(de)便利，運營的(de)高效，讓網站成爲(wéi / wèi)營銷工具，讓軟件能切實提升企業内部管理水平和(hé / huò)效率。優秀的(de)程序爲(wéi / wèi)後期升級提供便捷的(de)支持！

您當前位置>首頁 » 新聞資訊 » 小程序相關 >

小程序開發中四種方式快速實現上(shàng)拉觸底加載效果

發表時(shí)間：2021-1-6

發布人(rén)：融晨科技

浏覽次數：90

在(zài)智能小程序的(de)開發過程中，上(shàng)拉加載是(shì)一種十分常見的(de)加載效果，最近也(yě)收到(dào)了(le／liǎo)一些開發者在(zài)開發上(shàng)拉加載時(shí)遇到(dào)的(de)問題，今天的(de)内容就(jiù)爲(wéi / wèi)您介紹一下如果想實現下述效果的(de)上(shàng)拉加載，我們需要(yào / yāo)如何去做。

以(yǐ)下是(shì)爲(wéi / wèi)大(dà)家總結的(de)四種常見的(de)實現方式：

  1. 使用 onReachBottom 實現
  2. 使用 scroll-view 組件實現
  3. 使用信息流模闆實現上(shàng)拉加載
  4. 使用 swiper 組件配合 onReachBottom 實現上(shàng)拉加載

使用 onReachBottom 實現

智能小程序提供了(le／liǎo)onReachBottom，即頁面上(shàng)拉觸底事件的(de)處理函數。可以(yǐ)拿在(zài) Page 中定義 onReachBottom 處理函數，監聽該頁面用戶上(shàng)拉觸底事件，從而(ér)實現上(shàng)拉加載。

爲(wéi / wèi)方便大(dà)家直接使用看到(dào)效果，将下述代碼片段，直接導入開發者工具中運行查看即可：
swanide://fragment/7e944c0c3785bbdf4437c672dd0dc8e41584413934361

代碼解析

  1. swan 文件是(shì)每個(gè)智能小程序頁面的(de)展現模闆，類似于(yú) Web 開發中的(de) HTML，所以(yǐ)我們先在(zài) swan 文件中設置商品的(de)展現樣式：

     <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>

  2. 在(zài) js 文件中使用onReachBottom事件，當頁面滑動到(dào)頁面底部時(shí)，請求下一頁展示數據，即實現上(shàng)拉加載的(de)效果。

    ...
...
onReachBottom() {
    //觸底時(shí)繼續請求下一頁展示的(de)數據
    this.initData();
}

使用 scroll-view 組件實現

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

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

爲(wéi / wèi)方便大(dà)家直接使用看到(dào)效果，将下述代碼片段，直接導入開發者工具中運行查看即可：
swanide://fragment/fccd71b098a7d3921b9958ccd9dba1071584414516291

代碼解析

在(zài) swan 文件中使用 scroll-view 組件，設置商品的(de)展現樣式。當頁面滑動至底部時(shí)，觸發scrolltolower事件，實現試圖區域的(de)豎向滾動。

<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>

使用信息流模闆實現上(shàng)拉加載

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

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

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

并在(zài)進入page-feed文件夾後，執行下述命令行安裝所有模闆依賴。

npm i
爲(wéi / wèi)方便大(dà)家直接使用看到(dào)效果，将下述代碼片段，直接導入開發者工具中運行查看即可：
swanide://fragment/71af2b7f470b29b13f792c417fc5f03c1588757790402

代碼解析

  1. 在(zài) swan 文件中使用信息流模闆，通過 smt-spin 組件加載更多數據。
<smt-feed
        class="smt-feed pull-down-refresh"
        pull-to-refresh
        bind:scrolltolower="scrollToLower"
        text="{{text}}"
        style="height: 100vh" <!-- 信息流組件作爲(wéi / wèi)局部滾動組件，必須在(zài)它的(de)父級或本身指定高度 -->
    >
        <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>
  1. 在(zài)js文件中，利用在(zài)smt-spin組件上(shàng)綁定的(de)事件，實現加載更多的(de)數據。
    ...
    ...
    async scrollToLower() {
        const goods = await this.initData();
        await syncSetData(this, {
            goods: goods.concat(this.data.goods || [])
        });
    },
    ...
    ...

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

使用 swiper 組件配合 onReachBottom 的(de)實現方法也(yě)比較常見，相較上(shàng)邊兩種實現方式有些複雜，但同時(shí)也(yě)可以(yǐ)實現更加複雜的(de)上(shàng)拉加載場景。

swiper 組件是(shì)智能小程序提供的(de)滑塊視圖組件，與 swiper-item 組件配合使用，可實現 swiper 組件内 swiper-item 的(de)滑動。需要(yào / yāo)動态設置 swiper 組件的(de)高度，來(lái)保證每次滑動到(dào)底時(shí)都能觸發 onReachBottom 。

爲(wéi / wèi)方便大(dà)家直接使用看到(dào)效果，将下述代碼片段，直接導入開發者工具中運行查看即可：
swanide://fragment/20e8fd8c561418df7c4f24a850bf43461585224391100

代碼解析

  1. 根據實際場景需要(yào / yāo)在(zài) swan 文件中設置 tab，當設置多個(gè)tab時(shí)，實現效果如下：

    viedo

       <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>
  2. 在(zài) 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>
  1. 在(zài) js 文件中設置 swiper 組件的(de)高度。
 // 給image添加load事件，保證圖片全部加載出(chū)來(lái)再計算swiper-item的(de)高度并賦值給swiper
imageLoad() {
       
       let len = this.data.goods.length;
        this.setData({
            imgLoadNum: ++ this.data.imgLoadNum
        })
        if(this.data.imgLoadNum === len){
            this.queryNodeInfo();
        }
    },
    // 設置swiper的(de)高度，如果不(bù)動态設置swiper的(de)高度，當頁面滑動到(dào)底部時(shí)，不(bù)會觸發onReachBottom
    queryNodeInfo: function(){
        let currentTab = this.data.currentTab;
        swan.createSelectorQuery().selectAll('.item').boundingClientRect((rect) => {  
            this.setData({
                swiperH: rect[currentTab].height + 'px'
            })
        }).exec();
}
  1. 在(zài) js 文件中使用onReachBottom事件，當頁面滑動到(dào)頁面底部時(shí)，請求下一頁展示數據，即實現上(shàng)拉加載的(de)效果。
  onReachBottom() { 
            this.initData();
    },

總結

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

文章轉載自：segmentfault  作者：小花

相關案例查看更多

相關閱讀

線上(shàng)服務咨詢

聯系

159-8711-8523

友情鏈接

© 2004-2025 JTBC(CMS) Ynkui.Com All Rights Reserved.

京ICP證000000号