Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

In the display of list data, if the data is large or updated quickly, pull-up refresh and pull-down loading should be provided to improve user experience.

Pull-down refresh and pull-up load WXML file authoring

When we use the Scroll View component to display a list, it has its own trigger functions for pull-down refresh and pull-up load

<scroll-view class="scroll" scroll-y="{{true}}" upper-threshold="50" bindscrolltoupper="refresh" style="height:700px"> <l-loadmore show="{{upfresh}}" bindscrolltolower="getMore" type="loading" loading-text=" loadmore "> </l-loadmore> <l-loadmore show="{{downfresh}}" type="loading" loading-text=" loadmore "> </l-loadmore>Copy the code
  • Scroll-y: whether vertical scrolling is allowed. The default value is false. Here we set it to true
  • Upper-threshold: Trigger the Scrolltoupper event when it is far from the top/left (drop-down refresh)
  • Bindscrolltoupper: Triggered when scrolling to the top/left, which sets the function to be triggered when scrolling to the top
  • Bindscrolltolower: Triggered when scrolling to the top/right

Introduce the line-UI framework

The pull-down refresh and pull-up load display components I use here are provided by the Lin-UI framework. Here’s how to introduce the Lin-UI framework:

Lin-ui official document address

// Execute the following function NPM install lin-ui in the applets project directoryCopy the code

It is then imported in the JSON file of the page where the component needs to be imported

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

Thus the LIN-UI component is introduced successfully

Js code writing

Data: {downfresh:false,// bottom load display control upfresh:false// top load display control},Copy the code

First, set whether the loaded component is displayed in data. By default, it is not displayed

Drop down to refresh the JS code

// Refresh (){if(this.data.upfresh){console.log(" not done yet ") return; } var that = this; this.setData({ upfresh: true, // upfresh:false}) setTimeout(function() {that.updateData(true,()=>{that.setData({upfresh:false}) false, }); }) // wx.hideLoading(); Console. info(' Pull down refresh load completed.'); }, 500); }, // 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(); }}})},Copy the code

Pull up to load the JS code

/ slide to the bottom loading more * * * * / getMore () {/ / downloadingData = this. Data. DownloadingData if (this. Data. Downfresh) { Console. log(" not loaded yet ") 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 data load 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(); }}})},Copy the code

The whole drop-down refresh and pull-up loading function has been implemented, mainly using the component characteristics of Scroll view, according to the trigger time to control the explicit record of the component, the overall implementation is not very difficult, the specific code can be adjusted according to their actual situation