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

This article mainly introduces "how to achieve the pull-down refresh and pull-up load function in Mini Program". In daily operation, I believe many people have doubts about how to achieve the pull-down refresh and pull-up load function in Mini Program. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to realize the pull-down refresh and pull-up load function in Mini Program". Next, please follow the editor to study!

Drop-down refresh and pull-up load wxml file writing

When we use the scroll-view slide component to display the list, there are trigger functions for drop-down refresh and pull-up loading.

Scroll-y: whether vertical scrolling is allowed. The default is false. Here we set it to true.

Upper-threshold: how far from the top / left, the scrolltoupper event is triggered (drop-down refresh)

Bindscrolltoupper: triggered when scrolling to the top / left. Here, set the function to be triggered when scrolling to the top.

Bindscrolltolower: triggered when scrolling to the top / right

Introduction of line-ui framework

The pull-down refresh and pull-up load display components I use here are provided by the lin-ui framework. Here I will talk about how to introduce the lin-ui framework:

Lin-ui official document address

/ / execute the following function npm install lin-ui in the Mini Program project directory

Then introduce it in the json file of the page that needs to introduce the component

"usingComponents": {"l-loadmore": "/ miniprogram_npm/lin-ui/loadmore/index", "l-loading": "/ miniprogram_npm/lin-ui/loading/index",}

In this way, the lin-ui component was introduced successfully

Js code writing

Data: {load display control at the bottom of downfresh:false,// upfresh:false// top load display control}

First of all, set whether the loading component is displayed in data, which is not displayed by default.

Drop down to refresh the js code

/ / drop-down refresh refresh () {if (this.data.upfresh) {console.log ("not yet") return;} var that = this This.setData ({upfresh: true, / / upfresh:false}) setTimeout (function () {/ / updateData updates the logic code that.updateData (true, () = > {that.setData ({upfresh:false,});}) / / wx.hideLoading (); console.info ('drop-down refresh load completed.') }, / / Update data updateData:function (tail, callback) {var that = this Console.log ("updatedata-=-=seea" + that.data.searchValue) wx.request ({url: app.gBaseUrl + 'compony-detail/page', method:' GET', data: {page: 0, count: 20, componyname:that.data.searchValue} Success: (res) = > {this.setData ({componys: res.data}) if (callback) {callback () })}

Pull up and load js code

/ * Slide to the bottom to load more * / getMore () {/ / downloadingData=this.data.downloadingData if (this.data.downfresh) {console.log ("not loaded") return;} var that = this This.setData ({downfresh: true, / / upfresh:false}) this.setData ({downloadingData: true / / upfresh:false}) setTimeout (function () {that.loadData (true, () = > {that.setData ({downfresh: false});}) / / wx.hideLoading (); console.info ('pull-up data loading completed.') }, 1000);}, loadData: function (tail, callback) {var that = this Wx.request ({url: app.gBaseUrl + 'compony-detail/page', method:' GET', data: {page: that.data.componys.length, count: 20, componyname:that.data.searchValue} Success: (res) = > {/ / console.log (JSON.stringify (res.data)) that.setData ({componys: that.data.componys.concat (res.data),}) If (callback) {callback ();}})}

The whole function of pull-down refresh and pull-up load has been realized, mainly making use of the component features of scroll-view, according to the trigger time to control the display and concealment of the recorded components, the overall implementation is not very difficult, the specific code can be adjusted according to their own actual situation.

At this point, the study on "how to achieve the drop-down refresh and pull-up load function in Mini Program" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.