So verwenden Sie die scrpll-view-Komponente, um eine Pulldown-Aktualisierung in Uniapp zu implementieren

Wie verwende ich die scrpll-view-Komponente, um eine Pulldown-Aktualisierung in Uniapp zu implementieren? Im folgenden Artikel erfahren Sie, wie Sie mit der Scroll-Ansicht die Pulldown-Aktualisierung in Uniapp anpassen. Ich hoffe, er hilft Ihnen weiter.

Uniapp-Pulldown-Aktualisierung

Uniapp-Pulldown-Aktualisierung verfügt über zwei Methoden: Eine ist die allgemeine Pulldown-Aktualisierung unter Verwendung der Seitenlebenszyklusfunktion onPullDownRefresh. auch benutzerdefiniertes Pulldown genannt. Zum Aktualisieren verwenden Sie das benutzerdefinierte Dropdown-Aktualisierungsereignis in der scrpll-view-Komponente.

1. Aktualisieren Sie die gesamte Seite (onPullDownRefresh)

Definieren Sie die Verarbeitungsfunktion onPullDownRefresh in js (gleiche Ebene wie onLoad und andere Lebenszyklusfunktionen) und hören Sie sich das Pulldown-Aktualisierungsereignis des Benutzers an Seite. 【Offizielles Dokument】Keine weitere Einführung hier! Der heutige Schwerpunkt liegt auf Folgendem

2. Probleme bei der benutzerdefinierten Seitenaktualisierung (Bildlaufansicht)

Komponente

• kann das Dropdown-Menü nicht auslösen (Ursache Fehlerbehebung)

  1. Bildlauf - Die Ansichtskomponente ist nicht mit einer Ansicht umschlossen. Obwohl auf der offiziellen Website dieses Problem nicht erwähnt wird, gibt es keine Möglichkeit, Ereignisse in der Bildlaufansichtskomponente auszulösen, wenn es keine externe Ansicht gibt, die die Komponente allein umschließt.

  2. Die Bildlaufansicht hat keine feste Höhe in CSS und die Höhe wird im Bereich angezeigt. Wenn die Höhe beispielsweise auf 50 Vh eingestellt ist, wird der Inhalt angezeigt in der Komponente wird nur in der Hälfte des Bildschirms angezeigt, wenn die Bildlaufleiste der Seite nicht ausgelöst wird, sondern die Bildlaufleiste der Scroll-Ansicht nicht bestimmt werden kann, können Sie scss(lang='scss') verwenden. Die Berechnung von calc wird im Beispiel gezeigt (Beachten Sie, dass bei der Berechnung von calc Leerzeichen um - herum stehen müssen). scss(lang='scss')中的calc计算, 例子中有体现.(注意使用calc计算时, -左右一定要有空格)。

  3、设置高为百分比的话也不能触发下拉. 高可以使用max-hight, 不能使用min-hight。

  4、没有设置scroll-y

• 没有滚动到顶部触发下拉, 而是在可视页面中触发下拉

  官方默认无论page的滚动条在哪个位置, 只要在scroll-view页面上下拉都会触发下拉函数, 这样用户体验非常差. 可以使用@scroll滚动时触发的函数来获取scroll-view滚动条的位置, 进而来控制refresher-enabled开启和关闭自定义下拉刷新. 当scroll-view的滚动条滚动到顶部时, 使refresher-enabled为true, 其他条件为false。
  

直接上代码看： 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">别拉了，没有更多了~</view>
  <view class="item" v-for="(item, index) in dataList" :key="index">{{ item }}</view>
  </scroll-view>
</view>
</template>

基本上下拉刷新用到的属性方法也就这几个了! 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 // 是否开启下拉
    };
  },
  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;
    },
    // 自定义下拉刷新控件被下拉
    onPulling(e) {
      console.log("onpulling", e);
      if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
      this.triggered = true;
    },
    // 自定义下拉刷新被触发
    onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      this.page++;
      setTimeout(() => {
        this.triggered = false;
        this._freshing = false;
        this.getData();
      }, 500);
    },
    // 自定义下拉刷新被复位
    onRestore() {
      this.triggered = &#39;restore&#39;; // 需要重置
      console.error("onRestore");
    },
    // 自定义下拉刷新被中止
    onAbort() {
      console.error("onAbort");
    },
    getData() {
      // 前端模拟分页
      let temp = this.dealArray(this.arr, 3) 
      if (this.page > temp.length - 1) {
        this.isOpenRefresh = false
        return 
      }
      this.dataList.push(...temp[this.page])
    }
  },
};

style:

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

【注意】scroll-view 下拉刷新会出现上滑页面也触发下拉，可以在 @refresherpulling="onPulling"这个方法，如下 if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉

演示：

出现，在页面上任意位置只要下滑动页面就会触发下拉，这类问题。可以使用@scrolltoupper="scrolltoupper"触顶函数，在这里面做一个准入可以解决！

// 触顶操作-准入
scrolltoupper() {
    this.isAllowRefresh = true
}

// 自定义下拉刷新控件被下拉

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

也可以使用@scroll="onScroll"监听 scroll-top的值，让其 ===0时触发，也就是到达顶部！再触发！但是遇到其必须滑动一下页面出现滚动条，他才会监听！我们可以init

3. Wenn der Höchstwert als Prozentsatz festgelegt ist, kann das Dropdown nicht ausgelöst werden. Sie können

max-hight

für high verwenden, aber Sie können min-hight nicht verwenden.

🎜4. Es ist kein Scroll-y eingestellt🎜🎜🎜Es wird nicht nach oben gescrollt, um das Dropdown-Menü auszulösen, sondern das Dropdown-Menü auf der sichtbaren Seite. Die offizielle Standardeinstellung ist „Egal wo“. Die Bildlaufleiste der Seite ist, solange sie sich in der Bildlaufansicht befindet. Wenn Sie auf der Seite nach oben und unten ziehen, wird die Dropdown-Funktion ausgelöst, was die Benutzererfahrung sehr beeinträchtigt. Sie können die Funktion verwenden, die beim Scrollen @scroll, um die Position der Bildlaufleiste der 🎜Scroll-Ansicht🎜 zu ermitteln, und steuern Sie dann, dass refresher- aktiviert die benutzerdefinierte Pulldown-Aktualisierung ein- und ausschaltet. Die Bildlaufleiste scrollt nach oben, macht refresher-enabled auf „true“ und andere Bedingungen sind „false“.
🎜🎜Gehen Sie direkt zum Code, um Folgendes zu sehen: html:🎜

export default class Index extends mixins(uiMixin) {
	scrollTop: number = 0
	// 监听页面是否滚动 
	onScroll(e) {  
      this.scrollTop = e.detail.scrollTop
	}
	// 自定义下拉刷新被触发
  onRefresh() {
	if (this.scrollTop === 0) {
		if (this._freshing) return;
        this._freshing = true;
        this.page++;
       	setTimeout(() => {
          this.triggered = false;
          this._freshing = false;
          this.getData();
       }, 500);
	}
  }
})

🎜Grundsätzlich sind dies die einzigen Attributmethoden, die für die Pulldown-Aktualisierung verwendet werden! js:🎜rrreee🎜style:🎜rrreee🎜🎜[Hinweis] Durch die Pulldown-Aktualisierung der Bildlaufansicht wird die Seite nach oben verschoben und das Pulldown ausgelöst. Sie können diese Methode in @refresherpulling="onPulling" verwenden. , wie folgt if (e.detail.deltaY // Verhindern, dass die Seite nach oben rutscht und das Dropdown-Menü auslöst 🎜🎜🎜Demo: 🎜🎜🎜🎜🎜 erscheint einfach Wenn Sie irgendwo auf der Seite nach unten klicken, wird ein Dropdown-Menü angezeigt. Diese Art von Problem tritt auf. Sie können die Top-Funktion @scrolltoupper="scrolltoupper" verwenden und dort einen Eintrag vornehmen, um das Problem zu lösen! 🎜🎜rrreee🎜🎜Sie können auch @scroll="onScroll" verwenden, um den Wert von scroll-top zu überwachen und ihn auslösen zu lassen, wenn er === ist 0 , also den Gipfel erreichen! Erneut auslösen! Aber wenn er darauf stößt, muss er die Seite verschieben und eine Bildlaufleiste erscheint, und dann wird er zuhören! Wir können es während init initialisieren, sodass seine Variablen zunächst 0 sind! 🎜🎜rrreee🎜Empfohlen: „🎜uniapp-Tutorial🎜“🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die scrpll-view-Komponente, um eine Pulldown-Aktualisierung in Uniapp zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!