The onLoad life hook is called only once during the creation of the navigateTo page. After the navigateTo page jump, the onLoad life hook is not executed again when the page is returned to the previous page. The advantage of this is that the page is displayed quickly, but the request data in onLoad is not updated in real time. In this case, a drop-down refresh operation is required to help manually update the page data. This article will describe three ways to implement drop-down refresh in applets

enablePullDownRefresh

EnablePullDownRefresh is the easiest way to implement a pull-down refresh. Set enablePullDownRefresh to true in a JSON file and listen for onPullDownRefresh events in the Page. Click the title bar at the top to return to the top. You can also invoke wx.startPulldownRefresh () directly to trigger the pull-down refresh event and generate the pull-down refresh animation. After processing the data update in the pull-down refresh, you can call wx.stopPulldownRefresh () to end the animation. The advantages of this form of drop-down refresh are obvious: simplicity and no limitations, but the disadvantages are equally obvious:

  • The pull-down is too simple, the interaction is not elegant and the pull-down is not customizable
  • When the title bar is customized, the fixed position will also be pulled down under Android, as shown in the figure:

scroll-view

Scroll view is an official scroll view component. It is very simple to use, and the code to set the scroll refresh is as follows:

<scroll-view class="scroll" scroll-y bindscrolltoupper="refresh">
  <view class="content">content</view>
</scroll-view>
Copy the code

If you want to use scroll view to implement the scroll refresh, note:

  • Ensure that the height of the scrollview is fixed; otherwise, listening events will not be triggered
  • Set vertical scroll scroll-y
  • The height of the content in the scroll view must be higher than the height of the scroll view; otherwise, vertical scrolling cannot be generated and listening events cannot be triggered

Scroll to view faults:

  • Because iOS has a rubber band effect, the end result will be slightly different from Android
  • Pull-up cannot trigger pull-up listening events when the page is just opened. You need to scroll down first, trigger the scroll, and then pull-up the scroll to trigger the listening events
  • When you have a custom header, the scrollview needs a height calculation minus the header height

Scroll to view advantages:

  • You can customize the loading animation
  • The code is relatively simple
  • Compared with enablePullDownRefresh, scrollview is more convenient for scrolling list control:
    • Scroll-into-view: scroll to the specified element
    • Enable-back-to-top: When you click the status bar on iOS or double-click the title bar on Android, the scroll bar returns to the top. The function only supports vertical and the title bar becomes unavailable after you customize it

It is not recommended to use scroll view for scrolling. There is a tip in the official document:

Custom drop-down refresh

The main problem to be solved by custom pull-down refresh is that the title bar or navigation bar will be pulled down when Android uses enablePullDownRefresh. At the same time, the animation of both sides of the pull-down refresh will be consistent. It is not difficult to implement.

<view class="scroll" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
  <view class="animation">
    <view class="loading"></view>
    <text class="tip">{{state === 0 ? 'Drop refresh' : state === 1? 'Release refresh' : 'refresh in progress '}}</text>
  </view>
  <view style="transform: translateY({{translateHeight}}rpx)">
    <slot name="content"></slot>
  </view>
</view>
Copy the code

This file defines the template for the component. It has a scroll view package, tied to the Touch event, which contains animation for the drop-down refresh, and a slot for inserting the contents of the scroll 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.1 s infinite linear;
      
}
@keyframes load{ 
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg); }}.tip {
  margin-left: 10rpx;
  color: # 666;
}
Copy the code

Style file this is nothing special js:

let lastY = 0 // The last scroll position
let scale = 750 / wx.getSystemInfoSync().windowWidth // RPX conversion ratio
Component({
  options: {
    multipleSlots: true
  },
  data: {
    scrollTop: 0.translateHeight: 0.// Translation distance
    state: - 1
  },
  properties: {
    // The distance to trigger the pull-down refresh
    upperDistance: {
      type: Number.value: 150}},methods: {
    // Listen for 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 < 0) return
      this.data.translateHeight += offset
      this.data.state = 0
      lastY = e.touches[0].clientY
      if (this.data.translateHeight - this.data.scrollTop * scale > 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 <= 0) {
        this.stopRefresh()
      }
    },
    // Stop the refresh
    stopRefresh () {
      this.setData({
        translateHeight: 0.state: - 1
      }, () => {
        wx.pageScrollTo({
          scrollTop: 0.duration: 0})})})Copy the code

The most important part of this pull-down refresh component is to control the timing of the pull-down refresh. The code defines an upperDistance, which determines whether to perform the refresh. In the touchEnd event, determine whether the sliding distance reaches the set value, send the Scrolltoupper event when it reaches the set value, listen in the parent component, otherwise stop refresh.

Use:

<header title="Drop-down refresh" background="#fff"></header>
<refresh-scroll id="refreshScroll" bindscrolltoupper="refresh">
  <view class="item" slot="content" wx:for="{{list}}">{{item}}</view>
</refresh-scroll>
Copy the code
Page({
  data: {
    list: []},onLoad: function () {
    this.refreshScroll = this.selectComponent('#refreshScroll')
    for (let i = 0; i < 10; i++) {
      this.data.list.push(i)
    }
    this.setData({
      list: this.data.list
    })
  },
  onPageScroll (e) {
    this.refreshScroll.onPageScroll(e)
  },
  onReachBottom () {
    wx.showLoading({
      title: 'onReachBottom'
    })
    setTimeout((a)= > {
      wx.hideLoading()
    }, 1000)},refresh: function (e) {
    setTimeout((a)= > {
      this.refreshScroll.stopRefresh()
    }, 1000)}})Copy the code

The key is to pass the value of onPageScroll in the page, and then bindScrolltoupper listens to the Scrolltoupper event, performs the refresh operation, and then calls stopRefresh to stop the refresh.

conclusion

This article introduces three methods of small program drop-down refresh, the first two are small program official provided, the last one is a summary of personal thinking, writing is relatively simple, want to project application, but also need to improve their own, only hope to do a custom drop-down refresh to provide an idea. If there is a mistake or not rigorous place, welcome criticism and correction, if you like, welcome to praise