Drop-down refresh problem of mini program

In the mini program, the onLoad life hook is only called once when the page is created. After doing the navigateTo page jump, return to the upper-level page. Since the navigateTo jump only hides the current page, the onLoad life hook is called when returning to the upper-level page. It will not be executed again. The advantage of this is that the page can be displayed quickly, but the request data in onLoad will not be updated in real time. At this time, a pull-down refresh operation is needed to help manually update the page data. Next, this article We will introduce three ways to implement pull-down refresh in the mini program

enablePullDownRefresh

enablePullDownRefresh is the easiest way to implement pull-down refresh. In the json file, set enablePullDownRefresh to true, just listen to the onPullDownRefresh event in the Page. It supports clicking the top title bar to return to the top. It will be invalid when customizing the title bar. You can also trigger the pull-down refresh event by directly calling wx.startPullDownRefresh() to generate a pull-down refresh animation. After processing After the data in pull-down refresh is updated, call wx.stopPullDownRefresh() to end the animation.

The advantage of this form of pull-down refresh is obviously that it is simple and has no restrictions, but the disadvantages are also obvious:

• The pull-down animation is too simple, and the interaction is not elegant enough. The drop-down animation cannot be customized
• When customizing the title bar, fixed positioning, the title bar will also be pulled down together under Android

scroll-view

scroll-view is an official scroll view component. It is very simple to use. If you want to set up the pull-up refresh code, the code is as follows:

<scroll-view>
  <view>content</view>
</scroll-view>

If you want to use scroll- To implement pull-up refresh of the view, please note:

• Be sure to set a fixed height for scroll-view, otherwise the listening event will not trigger
• Settings Vertical scroll scroll-y
• The height of the content in scroll-view must be higher than the height of scroll-view, otherwise vertical scrolling cannot occur and the listening event cannot be triggered

scroll-view Disadvantages:

• Since iOS has a rubber band effect, the final effect will be somewhat different from Android
• When you first open the page, the pull-up cannot trigger the pull-up listening event. You need to scroll down first to trigger the scroll, and then pull up and scroll again to trigger the listening event.
• When there is a self- When defining the head, scroll-view requires a height calculation, subtracting the head height

scroll-view advantages:

• can be customized Loading animation
• The code is relatively simple

• Compared with enablePullDownRefresh, scroll-view is more convenient for scrolling list control:

  • scroll-into-view: Scroll to the specified element
  • enable-back-to-top: iOS click on the top status bar, Android double-click the title bar , the scroll bar returns to the top, only supports vertical orientation, and will become invalid after customizing the title bar

Officially does not recommend using scroll-view for drop-down Refresh, there is such a tip in the official documentation

##Customized drop-down refresh

Auto The main problem that the definition of pull-down refresh hopes to solve is the problem that the fixedly positioned title bar or navigation bar will be pulled down when Android uses enablePullDownRefresh. At the same time, the animations on both ends during pull-down refresh remain consistent. In fact, it is not difficult to implement. Next Let’s take a look at the specific implementation:

wxml:

<view>
  <view>
    <view></view>
    <text>{{state === 0 ? '下拉刷新' : state === 1? '松开刷新' : '刷新中'}}</text>
  </view>
  <view>
    <slot></slot>
  </view>
</view>

This file defines the template of the component. There is a scroll view package, which is bound to the touch event, which contains the animation during pull-down refresh, and a slot, slot Used to insert the content of the scrolling list

wxss:

.animation {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150rpx;
  margin-bottom: -150rpx;
  background-color: #fff;
}
.loading {
  width: 30rpx;
  height: 30rpx;
  border:6rpx solid #333333;
  border-bottom: #cccccc 6rpx solid;
  border-radius: 50%;
  animation:load 1.1s infinite linear;
      
}
@keyframes load{ 
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}

.tip {
  margin-left: 10rpx;
  color: #666;
}

Style file This is nothing special

js:

let lastY = 0 // 上一次滚动的位置
let scale = 750 / wx.getSystemInfoSync().windowWidth // rpx转化比例
Component({
  options: {
    multipleSlots: true
  },
  data: {
    scrollTop: 0,
    translateHeight: 0, // 平移距离
    state: -1
  },
  properties: {
    // 触发下拉刷新的距离
    upperDistance: {
      type: Number,
      value: 150
    }
  },
  methods: {
    // 监听滚动，获取scrollTop
    onPageScroll (e) {
      this.data.scrollTop = e.scrollTop
    },
    touchStart (e) {
      lastY = e.touches[0].clientY
    },
    touchMove (e) {
      let clientY = e.touches[0].clientY
      let offset = clientY - lastY
      if (this.data.scrollTop > 0 || offset  this.data.upperDistance) {
        this.data.state = 1
      }
      this.setData({
        translateHeight: this.data.translateHeight,
        state: this.data.state
      })
    },
    touchEnd (e) {
      if (this.data.translateHeight - this.data.scrollTop * scale > this.data.upperDistance) {
        this.setData({
          translateHeight: 150
        })
        this.triggerEvent('scrolltoupper')
        this.setData({
          state: 2
        })
      } else if (this.data.scrollTop  {
        wx.pageScrollTo({
          scrollTop: 0,
          duration: 0
        })
      })
    }
  }
})

The most important thing about this pull-down refresh component is to control the timing of pull-down refresh , the code is embodied by defining an upperDistance, and the pull-down refresh distance is used to determine whether to perform refresh. When the finger slides, the sliding distance is obtained, and the translateHeight is accumulated for display. In the touchEnd event, it is judged whether the sliding distance reaches the set value. When the set value is reached, the scrolltoupper event is sent and can be monitored in the parent component. Otherwise, the refresh is stopped.

Usage:

<header></header>
<refresh-scroll>
  <view>{{item}}</view>
</refresh-scroll>

Page({
  data: {
    list: []
  },
  onLoad: function () {
    this.refreshScroll = this.selectComponent('#refreshScroll')
    for (let i = 0; i  {
      wx.hideLoading()
    }, 1000)
  },
  refresh: function (e) {
    setTimeout(() => {
      this.refreshScroll.stopRefresh()
    }, 1000)
  }
})

The key when using it is to pass the value obtained in onPageScroll in the page, then bindscrolltoupper listens to the scrolltoupper event, performs the refresh operation and then calls stopRefresh to stop the refresh. , come down to see the test results on the real machine:

iOS:

Android:

When tested on a real machine, the performance was pretty good. Of course, this is just a simple component example of custom pull-down refresh. If it needs to be used in actual projects , you may still need to improve it yourself. After all, different people have different application scenarios. Here is just an idea.

Summary

This article introduces the small There are three ways to pull down and refresh the program. The first two are officially provided by the mini program. The last one is a personal summary of thoughts. It is also relatively simple to write. If you want to apply it in the project, you still need to improve it yourself. I just hope it can be done for everyone. Customizing drop-down refresh provides an idea.

Recommended tutorial: "WeChat Mini Program"

The above is the detailed content of Drop-down refresh problem of mini program. For more information, please follow other related articles on the PHP Chinese website!