Uniapp dropdown refresh

There are two methods for uniApp pull-down refresh. One is the whole pull-down refresh, using the page life cycle function onPullDownRefresh. The other is a local drop-down refresh also called a custom drop-down refresh, which uses the custom drop-down refresh event in the SCRpl-View component.

onPullDownRefresh

Define an onPullDownRefresh handler in JS (the same as life cycle functions such as onLoad) that listens for the user’s pull-down refresh event on the page. [Official documentation] No more details here! Today’s highlights are below 👇

2. Customize page refresh (Scroll view)

Problems encountered in the component

  • Failed to trigger the pull-down (Cause check)
  1. The ScrollView component is not wrapped with a View. The official website does not mention this problem, but there is no way to trigger events in the ScrollView component without a separate view wrapped around the component.
  2. There is no fixed height in the scrollview. If you set height in the CSS, the height will be displayed in the same area. For example, if the height is set to 50vh(100vh is full screen), content in the component will only scroll up and down in the half screen, and the scroll bar of the page will not triggerscroll-viewCan be used if the height is not good for determining the valuescss(lang='scss')(Note that when using calc, there must be a space around the -).
  3. Setting the height to a percentage also does not trigger a drop down. Height can be max-hight, not min-hight.
  4. Scroll y is not set
  • Instead of scrolling to the top triggering a pull-down, a pull-down is triggered in the visual page
  1. By default, no matter where the scroll bar of the page is located, the drop-down function will be triggered whenever the page is pulled up or down, which causes poor user experience. You can use@scrollFunction triggered when scrolling to getscroll-viewScroll bar position, and then to controlrefresher-enabledEnable and disable custom drop-down refresh. When the scroll bar of the scrollview reaches the top, enablerefresher-enabledIs true, other conditions are false.

Go directly to the code 👀 : HTML:

<template>
<view>
  <scroll-view
    show-scrollbar="true"
    style="height: 300px"
    scroll-y="true"
    :refresher-enabled="isOpenRefresh"
    :refresher-triggered="triggered"
    :refresher-threshold="100"
    refresher-background="gray"
    @refresherpulling="onPulling"
    @refresherrefresh="onRefresh"
    @refresherrestore="onRestore"
    @refresherabort="onAbort"
    @scroll="onScroll"
  >
  <view v-if=! "" isOpenRefresh">Don't pull, there is no more</view>
  <view class="item" v-for="(item, index) in dataList" :key="index">{{ item }}</view>
  </scroll-view>
</view>
</template>
Copy the code

Basically pull up and down to refresh the use of property methods are only a few! js:

export default {
  data() {
    return {
      triggered: false.dataList: [].arr: [1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30].page: 0.isOpenRefresh: true // Whether to enable the pull-down
    };
  },
  onLoad() {
    this._freshing = false;
    this.getData()
  },
  methods: {
    dealArray(array, groupNum) {
      let temp = [];
      for (let i = 0, len = array.length; i < len; i += groupNum) {
        temp.push(array.slice(i, i + groupNum));
      }
      return temp;
    },
    // The custom drop-down refresh control is pulled down
    onPulling(e) {
      console.log("onpulling", e);
      if (e.detail.deltaY < 0) return  // Prevent a slide up page from triggering a drop down
      this.triggered = true;
    },
    // Custom pull-down refresh is triggered
    onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      this.page++;
      setTimeout(() = > {
        this.triggered = false;
        this._freshing = false;
        this.getData();
      }, 500);
    },
    // Custom pull-down refresh is reset
    onRestore() {
      this.triggered = 'restore'; // Need to reset
      console.error("onRestore");
    },
    // Custom pull-down refresh aborted
    onAbort() {
      console.error("onAbort");
    },
    getData() {
      // The front end simulates paging
      let temp = this.dealArray(this.arr, 3) 
      if (this.page > temp.length - 1) {
        this.isOpenRefresh = false
        return 
      }
      this.dataList.push(... temp[this.page])
    }
  },
};
Copy the code

style:

<style>
view {
  text-align: center;
}
.item:nth-child(odd) {
  background-color: antiquewhite;
}
.item:nth-child(even) {
  background-color: aquamarine;
}
</style>
Copy the code

If (e.daile.deltay < 0) return // to prevent the pull-up page from being pulled down

Presentation:

When you slide down anywhere on the page, it triggers a pull-down. You can use @scrolltoupper=”scrolltoupper” to touch the top function and make an entry in this can be solved!

// Top operation - access
scrolltoupper() {
    this.isAllowRefresh = true
}

// The custom drop-down refresh control is pulled down

onPulling(e) {
    if (e.detail.deltaY < 0) return
    if (!this.isAllowRefresh) return;
    this.isRefresh = true;
    console.log("onpulling", e);
}
Copy the code

Or you can use at sign scroll equals “onScroll” to listen for the scroll top value, and trigger it when it equals equals equals zero, which is to go to the top! Trigger again! But encounter it must slide a page scroll bar appears, he will listen! We can init it and initialize it to 0!

export default class Index extends mixins(uiMixin) {
	scrollTop: number = 0
	// Listen to whether the page scrolls
	onScroll(e) {  
      this.scrollTop = e.detail.scrollTop
	}
	// Custom pull-down refresh is triggered
  onRefresh() {
	if (this.scrollTop === 0) {
		if (this._freshing) return;
        this._freshing = true;
        this.page++;
       	setTimeout(() = > {
          this.triggered = false;
          this._freshing = false;
          this.getData();
       }, 500); }}})Copy the code