Shulou(Shulou.com)06/02 Report--

This article mainly shows you how to achieve more functions of scrolling loading by WeChat Mini Programs. The content is simple and clear. I hope it can help you solve your doubts. Next, let the editor take you to study and learn the article "how WeChat Mini Programs can achieve more multi-functions of scrolling loading".

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 your own needs. I use the available height on the screen and display 6 by default on one page.

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 here

For (let I = 0; I

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

= 100) {

Wx.showToast ({/ / during the period, you can add an excessive pop-up box indicating "loading" in order to display the effect

Title: "I have a bottom line, too."

Icon: 'success'

Duration: 300

});

Return false

} else {

Wx.showLoading ({/ / during the period, you can add an excessive pop-up box indicating "loading" in order to display the effect

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

Class='box' >

{{item}} view >

Scroll-view >

View >

Js code

Page ({

/ * *

* initial data of the 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

< 10; i++) { resArr.push(i); }; var cont = result.concat(resArr); console.log(resArr.length); if (cont.length >

= 100) {

Wx.showToast ({/ / play a box if all loads are complete

Title: "I have a bottom line, too."

Icon: 'success'

Duration: 300

});

Return false

} else {

Wx.showLoading ({/ / during the period, you can add an excessive pop-up box indicating "loading" in order to display the effect

Title: 'loading'

Icon: 'loading'

});

SetTimeout () = > {

This.setData ({

Res: cont

});

Wx.hideLoading ()

}, 1500)

}

}

/ * *

* Lifecycle function-- listen for page loading

, /

OnLoad: function (options) {

Wx.getSystemInfo ({

Success: (res) = > {

This.setData ({

Height: res.windowHeight

})

}

})

}

})

What does Mini Program mean? Mini Program is an application that can be used without download and installation. It can be used immediately by scanning a QR code or searching it. It is easy to operate and easy to spread. It can achieve seven major functions, such as message notification, offline code scanning, official account association, and so on. It is based on Wechat, similar to APP. You can use it whenever you want. After using it, you will leave without taking up memory.

The above is about "how to achieve more multi-function scrolling loading by WeChat Mini Programs". If this article is helpful to you and you think it is well written, please share it with your friends to learn new knowledge. If you want to know more about it, please pay more attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.