欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

小程序開發(fā)中四種方式快速實現(xiàn)上拉觸底加載效果 - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價值，我們在追求其視覺表現(xiàn)的同時，更側(cè)重于功能的便捷，營銷的便利，運(yùn)營的高效，讓網(wǎng)站成為營銷工具，讓軟件能切實提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序為后期升級提供便捷的支持！

您當(dāng)前位置>首頁 » 新聞資訊 » 小程序相關(guān) >

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

發(fā)表時間：2021-1-6

發(fā)布人：葵宇科技

瀏覽次數(shù)：90

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

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

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

使用 onReachBottom 實現(xiàn)

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

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

代碼解析

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

     <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. 在 js 文件中使用onReachBottom事件，當(dāng)頁面滑動到頁面底部時，請求下一頁展示數(shù)據(jù)，即實現(xiàn)上拉加載的效果。

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

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

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

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

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

代碼解析

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

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

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

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

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

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

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

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

代碼解析

  1. 在 swan 文件中使用信息流模板，通過 smt-spin 組件加載更多數(shù)據(jù)。
<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>
  1. 在js文件中，利用在smt-spin組件上綁定的事件，實現(xiàn)加載更多的數(shù)據(jù)。
    ...
    ...
    async scrollToLower() {
        const goods = await this.initData();
        await syncSetData(this, {
            goods: goods.concat(this.data.goods || [])
        });
    },
    ...
    ...

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

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

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

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

代碼解析

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

    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. 在 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. 在 js 文件中設(shè)置 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();
        }
    },
    // 設(shè)置swiper的高度，如果不動態(tài)設(shè)置swiper的高度，當(dāng)頁面滑動到底部時，不會觸發(fā)onReachBottom
    queryNodeInfo: function(){
        let currentTab = this.data.currentTab;
        swan.createSelectorQuery().selectAll('.item').boundingClientRect((rect) => {  
            this.setData({
                swiperH: rect[currentTab].height + 'px'
            })
        }).exec();
}
  1. 在 js 文件中使用onReachBottom事件，當(dāng)頁面滑動到頁面底部時，請求下一頁展示數(shù)據(jù)，即實現(xiàn)上拉加載的效果。
  onReachBottom() { 
            this.initData();
    },

總結(jié)

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

文章轉(zhuǎn)載自：segmentfault  作者：小花

相關(guān)案例查看更多