Four ways to quickly load the sliding bottom

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.

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

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.

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

Use the information flow template in swan files to load more data through the smt-spin component.

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

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

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!