How to implement more functions of Mini Program scrolling load

This article mainly explains "how to achieve more functions of Mini Program rolling load", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "Mini Program rolling load more functions how to achieve" it!

1. Components and api to be used

Scroll-view (scrollable view area)

Wx.showToast (OBJECT) display message prompt window-for displaying loading chrysanthemums

two。 Attributes that need to be used

3.scrol-view needs to specify a height, which can be calculated according to its own needs. Generally, the available height of the screen is used and 6 are displayed on one page by default.

4. Scroll to the bottom to bind the event that needs to be triggered

5. The operation event function is mainly to merge the requested data with the concat method, and then assign the value. I use the for loop to pretend to add the data, which can be changed into my own ajax in the actual project, and in order to simulate the load, I added a timer of 1.5s, first call the prompt box api successfully and then close it.

Lower () {var result = this.data.res; var resArr = []; / / you can use your own ajax for (let I = 0; I) here

< 10; i++) { resArr.push(i); }; var cont = result.concat(resArr);//合并请求的数据 console.log(resArr.length); if (cont.length >

{wx.showToast (in order to display the effect, you can add an excessive pop-up box to prompt "loading" title:'I also have a bottom line', icon: 'success', duration: 300}); return false } else {wx.showLoading (in order to display the effect, an excessive pop-up box can be added to prompt "loading" title: 'loading', icon: 'loading',}); setTimeout () = > {this.setData ({res: cont}); wx.hideLoading ();}, 1500)}}

6. If it is successful, the complete code can be copied and run directly.

Wxml code

{{item} js code Page (initial data of {/ * page * / data: {height:', res: [0,1,2,3,4,5,6,7,8,9]}, lower () {var result = this.data.res; var resArr = []; for (let I = 0; I resArr.push (I);}; var cont = result.concat (resArr)) Console.log (resArr.length); if (cont.length > = 100) {wx.showToast ({/ / if all loads are completed, also play a box title:'I also have a bottom line', icon: 'success', duration: 300}); return false } else {wx.showLoading (during {/ / period, you can add an excessive pop-up box to prompt "loading" title: 'loading', icon: 'loading',}); setTimeout () = > {this.setData ({res: cont}); wx.hideLoading () }, 1500)}, / * Lifecycle function-- listen to page load * / onLoad: function (options) {wx.getSystemInfo ({success: (res) = > {this.setData ({height: res.windowHeight})}})-- > so far I believe that the "Mini Program rolling load more functions how to achieve" have a deeper understanding, might as well to practical operation it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!