Four ways to quickly load the sliding bottom

Author: Flowers
github link: github.com/mengbodi/sw...
Join us

Go to the Smart Applet Developer Community to see more

In the development of smart applets, pull-up loading is a very common loading effect. Recently, some developers have encountered problems when developing pull-up loading. Today's content shows you what we need to do if we want to achieve the following effects.

Here are four common implementations summarized for you:

  1. Using onReachBottom implementation
  2. Implement using scroll-view component
  3. Pull-up loading using information flow templates
  4. Use swiper components with onReachBottom for pull-up loading

Using onReachBottom implementation

The smart applet provides onReachBottom, the handler for bottom-pull events on a page.Can be held in Page The onReachBottom handler is defined in to listen for user pull-up bottom events on the page to enable pull-up loading.

For your convenience, just import the following code snippet directly into the developer tool and run it for viewing: swanide://fragment/7e944c0c3785bbdf4437c672dd0dc8e41584413934361

Tool download link: Windows /mac

Code parsing

  1. The swan file is the presentation template for each smart applet page, similar to HTML in Web development, so we first set the display style of the goods in the swan file:

     <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">Effort Loading...</view>
    Copy Code
  2. Using the onReachBottom event in the js file, when the page slides to the bottom of the page, requests the next page to display the data, which is the effect of pull-up loading.

    ...
    ...
    onReachBottom() {
        //Continue requesting data for next page when bottoming out
        this.initData();
    }
    Copy Code

See more onReachBottom

Implement using scroll-view component

Pull-up loading using the scroll-view component is also a very common method, with steps similar to using onReachBottom events.

scroll-view It is a component provided by Baidu Intelligent Applet, which can achieve horizontal and vertical scrolling of the attempted area.Using its bindscrolltolower property, scrolltolower events are triggered when the page scrolls to the bottom or right to achieve the effect of pull-up loading.

For your convenience, import the following code snippet directly into the developer tool and run it for viewing: swanide://fragment/fccd71b098a7d3921b9958ccd9dba1071584414516291

Code parsing

Use the scroll-view component in the swan file to set the display style of the goods.When the page slides to the bottom, the scrolltolower event is triggered to achieve vertical scrolling of the attempted area.

``` 
<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">Effort Loading...</view>
    </scroll-view>
</view>
```
Copy Code

Pull-up loading using information flow templates

Information Flow Template It is a component provided by Baidu Intelligent Applet. It can be configured with pull-up refresh, list loading and pull-up loading functions. It is suitable for list information display and can be placed in any part of the page.

Unlike other component functionality, using an information flow template requires the following command line to introduce a page template.

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

After entering the page-feed folder, install all template dependencies from the following command line.

npm i 
Copy Code

To make it easier for you to see the effect directly, import the following code snippet directly into the developer tool and run it for viewing: swanide://fragment/71af2b7f470b29b13f792c417fc5f03c15887790402

Code parsing

  1. Use the information flow template in swan files to load more data through the smt-spin component.
<smt-feed
	    class="smt-feed pull-down-refresh"
	    pull-to-refresh
	    bind:scrolltolower="scrollToLower"
	    text="{{text}}"
	    style="height: 100vh" <!-- As a local scrolling component, the information flow component must specify a height on its parent or on its own -->
	>
	    <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>
Copy Code
  1. In the js file, use events bound on the smt-spin component to load more data.
    ...
    ...
    async scrollToLower() {
        const goods = await this.initData();
        await syncSetData(this, {
            goods: goods.concat(this.data.goods || [])
        });
    },
    ...
    ...
Copy Code

Use swiper components with onReachBottom for pull-up loading

Implementations using swiper components with onReachBottom are also common, being somewhat more complex than the two above implementations, but also implementing more complex pull-up loading scenarios.

swiper A component is a slider view component provided by a smart applet, and swiper-item Components can be used together to achieve swiper-item sliding within a swiper component.The height of the swiper component needs to be set dynamically to ensure that onReachBottom is triggered each time it slides to the bottom.

To make it easier for you to see the effect directly, import the following code snippet directly into the developer tool and run it for viewing: swanide://fragment/20e8fd8c561418df7c4f24a850bf43461585224391100

Code parsing

  1. Depending on the actual scenario, you need to set tabs in the swan file. When you set multiple tabs, this works as follows:

   <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>
Copy Code
  1. Use swiper, swiper-item components in swan files.
<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">Effort 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">Effort Loading...</view>
        </swiper-item>
</swiper>
Copy Code
  1. Set the height of the swiper component in the js file.
 // Add a load event to the image to ensure that all pictures are loaded before calculating the swiper-item height and assigning it to swiper
imageLoad() {
	   
       let len = this.data.goods.length;
        this.setData({
            imgLoadNum: ++ this.data.imgLoadNum
        })
        if(this.data.imgLoadNum === len){
            this.queryNodeInfo();
        }
    },
    // Set swiper's height. If swiper's height is not set dynamically, onReachBottom will not be triggered when the page slides to the bottom
    queryNodeInfo: function(){
        let currentTab = this.data.currentTab;
        swan.createSelectorQuery().selectAll('.item').boundingClientRect((rect) => {  
            this.setData({
                swiperH: rect[currentTab].height + 'px'
            })
        }).exec();
}
Copy Code
  1. Using the onReachBottom event in the js file, when the page slides to the bottom of the page, requests the next page to display the data, which is the effect of pull-up loading.
  onReachBottom() { 
            this.initData();
    },
Copy Code

summary

Use methods 1, 2, and 3 to quickly pull-up simple pages; use method 4 to switch between the latest and hottest lists where there are multiple tab s on the page.Developers can choose different implementations based on their actual situation.

Finally, thank you all for your active involvement in the development of Baidu applets. Any problems during the development process can be interacted with the community or other developers. You can also send your comments to smartprogramtech@baidu.com. We look forward to your participation!

Tags: Fragment github npm Windows

Posted on Sat, 09 May 2020 21:13:33 -0700 by apoc-