[wechat applet] realize applet pull-down refresh and pull-up loading

The built-in pull-up loading of wechat applet 、 Pull down refresh and Android The original is different ,Android The native pull-down refresh uses SwipeRefreshLayout Components , rewrite onRefresh Method , Pull up loading uses RecycleView Of addOnScrollListener To monitor RecycleView Whether it has been pulled to the bottom , So as to achieve pull-up loading . Small programs are different , The difference of small programs is mainly reflected in each interface js There are two listening pull-up files (onReachBottom） And drop-down (onPullDownRefresh） Methods ,, Therefore, the custom pull-down refresh and pull-up load mentioned here do not mean to customize other methods to implement , Instead, it uses its own method to implement . Even so , be relative to Android In terms of nature , It is still much easier .

Through this article you can learn :

1. Customization of components
2. Animation production
3. Implementation of pull-down refresh and pull-up load
4. Loading animation of applet

No component can not see the effect of pull-down refresh and pull-up loading , There is no point in writing code blindly , Before making a pull-down refresh and pull-up load , We need to customize the relevant components first , such , Components are available only after the pull-down refresh and pull-up load

Custom components

1、 Create a directory

For customized components, we need to put them in a proper place , There will be other custom components in the future . Add a... In the root directory of the applet components Is used to store custom components or components defined by others .

tip ： establish Page Page or Component when , Right click New Page Or new Component Some code and comments will be generated automatically ~

2、json File configuration

As a custom component , You need to declare that it is custom , We need to be in json Add in component Configuration of , Set it to true, To indicate that this component is custom

{
    
  "usingComponents": {
    },
  "component": true
}

3、 Drawing styles

What I did UI According to others UI The picture is imitated , There is such a style

index.xml

<view class="loading">
  <image src="/images/loading.png" class="image" animation="{
    {animation}}"/>
  <text class="loading-text">{
    {
     value }}</text>
</view>

index.wxss

.loading {
  text-align: center;
  width: auto;
  height: 40px;
  line-height: 40px;
}

.image {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}

.loading-text {
  width: auto;
  height: auto;
  font-size: 28rpx;
  margin-left: 10rpx;
  color: gray;
}

index.json、index.xml、index.wxss There are all the codes , So let's move into index.js Write the code ！

4、 Animation production

The animation process of wechat applet is really simple

//  Create an animation variable 
var animation = wx.createAnimation({
    
  duration:  Animation duration , Company  ms,
  timingFunction:  The effect of animation ,
  delay：  Animation delay time , Company  ms
})
animation.rotate(60).step().export()

The applet provides seven kinds of timingFunction attribute , The closest you can get to the desired effect animation is step-start 了 ,linear Words , The animation effect used to do this kind of fixed-point rotation makes people speechless , Specifically, I suggest you try it , See the effect that makes the author speechless .

Um. , That's it , An animation is completed

If you want to change to another style of animation , Such as ： translation 、 Zoom in and out 、 Tilt can be replaced directly rotate Location and parameters required for animation

To learn more about wechat applet animation, please see Wechat applet animation API

5、 Component lifecycle

Small programs can be used directly without downloading , This means that its code is compiled through online access , Like a web page , Put the code on the server , thus , As a result, the performance of the applet is very poor , Small program code optimization has also become an important step in small program development .

When loading data , No one knows when the data will be loaded , The animation in loading needs to be executed circularly all the time before the data is loaded , If the data is not destroyed after loading , Every time you show the animation , It will add a loop , With the superposition of times , The worrying performance of small programs will be made worse .

In order to use components properly , It can be used in applet components such as Page Use the same lifecycle as the page , But there are only two kinds of component life cycles ：
（1）attached ： Execute when the component is visible
（2）detached ： Execute when the component is not visible

lifetimes: {
    
  //  When the component instantiation enters the page node tree, it executes （ When the component is visible ）
  attached: function () {
    
  
  },

  //  When the component instantiation is removed from the page node （ When components are not visible ）
  detached: function () {
    
  
  }
},

The drop-down refresh (onReachBottom）

The pull-down refresh uses its own method onReachBottom

Add... To this method _this.setData({ next : true }) The refresh is complete .

But at this time you may encounter a series of problems , for instance ：

1、 Unable to pull down refresh 、 Pull down refresh has no effect

Don't blame the author at this time , That the author's article is deceiving , To consume other people's time while others watch .

In fact, all this is just because you have not configured the pull-down refresh , To configure the pull-down refresh, you only need to index.json File to add "enablePullDownRefresh": true

2、 Drop down refresh style

There is another problem when the pull-down refresh occurs , You can't use custom styles , Otherwise, the effect is as shown in the figure ：

Drop down refresh , Will also pull down the system style , As for how to hide it , I haven't found a way yet , You are welcome to leave your own answers in the comment area when you have ideas to solve this problem .

You can't hide , We can only make do with it , Or use recycle-view Replace data style layout , Read several articles , The way they implement pull-down refresh is basically through recycle To set the properties of .

All right. , Speaking of this, let's get back to the point , Since it can't be hidden , Let's use it , Implement a simple , Only need index.json File to add "backgroundTextStyle": "dark" that will do , Stop using wx.stopPullDownRefresh(), It's not bad , Pictured ：

Pull on loading (onPullDownRefresh)

The pull-down refresh of the applet is dead , But pull-up loading does not , And there is no need to configure related properties , Just call .

onReachBottom: function () {
    
  _this.setData({
    
    next1: true
  })
  setTimeout(function () {
    
    _this.setData({
    
      next1: false
    })
  }, 3000)
},

So the effect comes out

There is no limit to pull-up loading , We can also use wechat applet to bring some animation to realize

Use wx.showNavigationBarLoading()、wx.hideNavigationBarLoading() The following effects can be achieved ：

Use wx.showLoading({ title: ' Loading ...', })、wx.hideLoading() The following effects can be achieved ：

If you feel these do not meet your needs , You can go to Vant Weapp Framework official document See more

Summary ： Where you need a list , Xiaobian is still recommended recycle-view To achieve the effect , When a page displays a lot of information , Will cause the applet page to jam and white screen , You should know that the performance of small programs is not very good , and recycle-view Is an optimization scheme for the official applet to load a large amount of data .

Code uploaded to → Wechat applet pull-up loading and pull-down refreshing