Implementation of wechat applet bottom loading and pull-down refresh

There is such a common requirement when making small programs recently , Load a list of information , Bottom loading and pull-down refresh are required , It suddenly occurred to me that the interface of the Nuggets album is very similar to this requirement , Next, let me introduce my implementation scheme .

Bottom touch loading

Steps are as follows ：

• Encapsulates a loader function

• This is triggered when the listening page is loaded loader function

• Trigger this function again when the bottom is detected

onLoad: function (options) {
 this.loadBooks(this.data.books.length)
},
onReachBottom: function () {
 this.loadBooks(this.data.books.length)
},
loadBooks: function () {
 
},


Notice the lifecycle function here ：

onload

Load the lifecycle for the listening page ,

onReachBottom

To monitor the bottom action life cycle .

loader Functional thinking

loader The encapsulation of functions first depends on our business logic , First of all, think about it according to our business ,

We want to get data by touching the bottom , So we need to fix the amount of data we get each time , secondly , To avoid repetition , We can't get... Repeatedly , Consider starting with the data items you want to get , The following is the implementation of

skip(n)

be necessary , That is, the parameters passed in are from the n A start , We are listening and touching the bottom, and the parameters are the length of the current array , Because when the page is just loaded, the array length is 0, When it hits the bottom , The length of the array is exactly the data item that has been obtained , So you can then get the data you didn't get and merge it with the previous array .

loader Function implementation

Actually loader The implementation of function is the core of bottom loading function , Under normal circumstances, the logic of bottom touch loading is to accumulate a number to represent the number of page numbers by touching the bottom , Then send the page number to the server , The server returns the information array to , I use cloud development , So the solution is different .

• call wx Developed by the cloud api,
  skip(n)
  From the... Of the set n Item start get  
  limit(n)
  At most n Elements .

• adopt get Obtain corresponding data , Here for n After 6 Data .

• adopt
  cancat()
  To realize the merging of arrays, we need to pay attention to the following
  limit(n)
  Direct use has 20 The length limit of , If there is a need , Need to get 20 More than one data set , Then we can solve it in the cloud function .

loadBooks: function (n) {
 wx.cloud.database().collection('books').skip(n).limit(6).get().then(res => {
 console.log(res.data)
 this.setData({
 books: this.data.books.concat(res.data)
 })
 })
 },


Touch the bottom to load the animation

About bottom loading animation , I was in codepen Reference , Just when it hits the bottom , Change the variable that controls the animation element , When the data is obtained successfully, it can be changed again , The loading animation code is as follows .

<view class=&quot;loader&quot; wx:if=&quot;{{isLoader}}&quot;>
 <view class=&quot;dot&quot;></view>
 <view class=&quot;dot&quot;></view>
 <view class=&quot;dot&quot;></view>
 <view class=&quot;dot&quot;></view>
 <view class=&quot;dot&quot;></view>
</view>

.dot {
 width: 24rpx;
 height: 24rpx;
 background: #3ac;
 border-radius: 100%;
 display: inline-block;
 animation: slide 1s infinite;
}

.dot:nth-child(n) {
 animation-delay: 0.1s;
 background: #6cd793;
}

@keyframes slide {
 0% {
 transform: scale(1);
 }
 50% {
 opacity: .3;
 transform: scale(2);
 }
 100% {
 transform: scale(1);
 }
}


Advantages of bottom loading

In small programs, if the amount of data is too large , One time acquisition will aggravate dom The burden of rendering , More Than This , The response speed will be the same as turtle speed , So for the user experience , Good responsive interaction is necessary , Interact by touching the bottom , Load data by volume , as follows , I load eight copies of data every time I hit the bottom , Then until all the data is loaded , It's empty .

The drop-down refresh

Small program pull-down refresh page implementation is still very easy

• At the same level of the corresponding page json Configure it in the file
  enablePullDownRefresh
  Make it
  true
  , Here is the drop-down refresh setting of the corresponding page

 {
 "usingComponents": {},
 "enablePullDownRefresh": true,
 }


• Use
  onPullDownRefresh
  Monitor user pull-down action

 onPullDownRefresh: function () {},


• call wx Loading api

 onPullDownRefresh: function () {
 console.log(1)
 // Show load... In the title bar
 wx.showNavigationBarLoading() 
 wx.showLoading({
 title: ' Refreshing ...',
 })
 wx.cloud.database().collection('books').skip(0).limit(6).get().then(res => {
 this.setData({
 books: res.data
 })
 wx.hideLoading();
 // Hide navigation bar loading animation
 wx.hideNavigationBarLoading();
 // Stop the drop-down refresh
 wx.stopPullDownRefresh();
 })
 },


Specifically api The related introduction is as follows :

• wx.showNavigationBarLoading()
  Display and load animation in the navigation bar

• wx.hideNavigationBarLoading()
  Hide navigation bar loading animation

• wx.stopPullDownRefresh()
  Stop the drop-down refresh

Last

Diggers have better ideas and leave messages in the comment area , I will improve my xxx mountain