Author: Github Link: github.com/mengbodi/sw… Join us

For more content, please go to the intelligent applets developer community

In the development process of intelligent small program, pull-up loading is a very common loading effect, recently also received some developers in the development of pull-up loading encountered problems, today’s content for you to introduce if you want to achieve the following effect of pull-up loading, we need to do.

Here are four common implementations:

  1. Use onReachBottom
  2. Use the Scroll view component to achieve
  3. Use information flow templates for pull-up loading
  4. Swiper and onReachBottom are used for pull-up loading

Use onReachBottom

The smart applet provides onReachBottom, a handler for a pull-down event on a page. You can implement pull-up loading by defining onReachBottom handlers in the Page and listening for pull-up events by the user on that Page.

Direct use to see the effect, in order to facilitate everybody will the following code snippet, direct import can be run in the developer tools to see: swanide: / / fragments / 7 e944c0c3785bbdf4437c672dd0dc8e41584413934361

Tool download link: Windows/MAC

Code parsing

  1. Swan file is the presentation template of each smart applet page, similar to HTML in Web development, so we first set the presentation style of goods in 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"> Trying to load... </view>Copy the code

  2. Using the onReachBottom event in the js file, when the page slides to the bottom of the page, request the next page to display the data, that is, achieve the effect of a pull-up load.

    . . onReachBottom() {// Continue to request the data displayed on the next page when the bottom is reached
    this.initData();
}
Copy the code

See onReachBottom for more

Use the Scroll view component to achieve

It is also a very common method to use the Scrollview component to achieve pull-up loading, and the implementation steps are similar to using the onReachBottom event.

Scrollview is a component provided by Baidu intelligent mini program, which can realize horizontal and vertical scrolling of the attempted area. Using its BindScRolltolower property, the Scrolltolower event is triggered when the page scrolls to the bottom or right to achieve the effect of pull-up loading.

Direct use to see the effect, in order to facilitate everybody will the following code snippet, direct import can be run in the developer tools to see: swanide: / / / fccd71b098a7d3921b9958ccd9dba1071584414516291 fragments

Code parsing

Use the Scrollview component in the swan file to set the presentation style of the product. 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"> </view> </scroll-view> </view> ```Copy the code

Use information flow templates for pull-up loading

Information flow template is a component provided by Baidu intelligent mini program. 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 the other component features, using the information flow template requires the following command line to import the page template.

npm i @smt-ui-template/page-feed
Copy the code

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

npm i 
Copy the code

Direct use to see the effect, in order to facilitate everybody will the following code snippet, direct import can be run in the developer tools to see: swanide: / / fragments / 71 af2b7f470b29b13f792c417fc5f03c1588757790402

Code parsing

  1. Use the information flow template in the SWAN file 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"<! The information flow component, as a local scroll component, must specify a height on either its parent or itself --> > <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 the code
  1. In the JS file, the implementation loads more data using events bound to the SMT-SPIN component.
. . asyncscrollToLower() { const goods = await this.initData(); await syncSetData(this, { goods: goods.concat(this.data.goods || []) }); },... .Copy the code

Swiper and onReachBottom are used for pull-up loading

The swiper component and onReachBottom implementation method are also common. Compared with the above two implementations, it is a bit more complex, but it can also achieve more complex pull-up loading scenarios.

The Swiper component is a slider view component provided by the smart applet. When used together with the Swiper-Item component, swiper-Item can be swiped in the swiper component. You need to dynamically set the height of the Swiper component to ensure that onReachBottom is triggered every time you swipe to the bottom.

Direct use to see the effect, in order to facilitate everybody will the following code snippet, direct import can be run in the developer tools to see: swanide: / / fragments / 20 e8fd8c561418df7c4f24a850bf43461585224391100

Code parsing

  1. Set TAB in swan file according to actual scenarios. When multiple tabs are set, the effect is 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 the code
  1. Use swiper, swiper-item components in swan file.
<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"> Trying to load... </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"> Trying to load... </view> </swiper-item> </swiper>Copy the code
  1. Set the swiper component height in the js file.
 // Add a load event to the image to ensure that all images are loaded before calculating the height of swiper-item 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 the swiper height. If you do not set the swiper height dynamically, onReachBottom will not trigger 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 the code
  1. Use in a js fileonReachBottomEvent, when the page slides to the bottom of the page, request the next page to display data, that is, to achieve the effect of pull-up loading.
  onReachBottom() { 
            this.initData();
    },
Copy the code

conclusion

Use method 1, 2, 3 can quickly realize the simple page pull-up loading; Method 4 can realize the scenario where there are multiple tabs on the page, such as switching the latest and hottest lists. Developers can choose different implementation methods according to the actual situation.

Finally, thank you for your active participation in the development of Baidu small program, any problems in the development process can be in the community to interact with the official or other developers, you can also send your comments to [email protected], looking forward to your participation!