Pull on loading

Pull-up loading in UniApp is implemented through the onReachBottom() lifecycle function, which is triggered when the pull-down hits bottom. When paging data is requested, it is loaded through this function. In this case, the global variable pageIndex can be assigned to 1 for the first time to pass the parameter. When the next page is loaded, this. PageIndex ++ is used.

Data (){return {pageIndex:1, list:[]}}, methods:{getList(){uni.request({url:"/ API /getGoods? pageindex="+this.pageIndex },succcess:res=>{ this.list=res.data.message }) } }Copy the code

But there is a problem: when you fetch the next page of data, the previous data disappears, so you should keep the previous data, so use the extension operator to expand the data into an array. The success of the function should be written as: this list = […. this list,… res. Data. The message]

In addition, there is a problem that the pull-down refresh needs to determine if there is any data on the next page, so you can’t keep refreshing requests. If the background returns the total number, mod 10 by the total number. If the value is not 0, return. If the background does not return the total number of entries, use this.list.length to check the number of entries. The function can be written as follows: if (this.list.length<this.pageIndex*10) return

The pull to refresh

On the page. Open up the json to refresh (enablePullDownRefresh: true), to monitor the drop-down refresh function for onPullDownRefresh (), when trigger the drop-down refresh

{this.pageIndex = 1 this.list=[]} // Set this.pageIndex = 1, initialize onPullDownRefresh(){this.pageIndex = 1 this.list=[] SetTimeOut (()=>{this.getList(()=>{uni.stopPulldownRefresh ()})},1000)} // Receive callback functions through callback getList(callback){ uni.request({ url:"/api/getGoods? pageindex="+this.pageIndex },succcess:res=>{ this.list=[...this.list,...res.data.message] callBack&&callBack() }) }Copy the code