Comment utiliser le composant scrpll-view pour implémenter l'actualisation déroulante dans Uniapp

Comment utiliser le composant scrpll-view pour implémenter l'actualisation déroulante dans uniapp ? L'article suivant vous expliquera comment utiliser la vue déroulante pour personnaliser l'actualisation déroulante dans uniapp. J'espère que cela vous sera utile !

actualisation déroulante uniapp

actualisation déroulante uniapp a deux méthodes, l'une est l'actualisation déroulante globale, en utilisant la fonction de cycle de vie de la page onPullDownRefresh ; également appelé menu déroulant personnalisé. Pour actualiser, utilisez l'événement d'actualisation déroulant personnalisé dans le composant scrpll-view.

1. Actualisez la page entière (onPullDownRefresh)

Définissez la fonction de traitement onPullDownRefresh dans js (même niveau que onLoad et d'autres fonctions de cycle de vie) et écoutez l'événement d'actualisation déroulant utilisateur du page. 【Document officiel】Plus d'introduction ici ! L'accent d'aujourd'hui est mis sur ce qui suit

2. Les problèmes rencontrés lors de l'actualisation de la page personnalisée (affichage par défilement)

du composant

• ne peuvent pas déclencher la liste déroulante (cause un dépannage)

  1. - Le composant view n'est pas enveloppé dans une vue. Bien que le site officiel ne mentionne pas ce problème, s'il n'y a pas de vue externe qui enveloppe seul le composant, il n'y a aucun moyen de déclencher des événements dans le composant scroll-view.

  2. La vue de défilement n'a pas de hauteur fixe. Définissez la hauteur en CSS, et la hauteur sera affichée dans la zone. Par exemple, si la hauteur est définie sur 50vh (100vh est en plein écran), le contenu. dans le composant ne sera affiché que dans la moitié de l'écran lors du défilement de haut en bas sur l'écran, la barre de défilement de la page ne sera pas déclenchée, mais la barre de défilement de scroll-view sera déclenchée si la hauteur. ne peut pas être déterminé, vous pouvez utiliser scss(lang='scss') Le calcul calc est reflété dans l'exemple (notez que lors de l'utilisation du calcul calc, il doit y avoir des espaces autour de -). 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. Si le maximum est défini en pourcentage, la liste déroulante ne peut pas être déclenchée. Vous pouvez utiliser

max-hight

pour high, mais vous ne pouvez pas utiliser min-hight.

🎜4. Aucun défilement n'est défini🎜🎜🎜Il ne défile pas vers le haut pour déclencher la liste déroulante, mais déclenche la liste déroulante dans la page visible🎜🎜La valeur par défaut officielle est peu importe où la barre de défilement de la page est, tant qu'elle est en vue de défilement. Tirer de haut en bas sur la page déclenchera la fonction déroulante, ce qui rend l'expérience utilisateur très mauvaise. Vous pouvez utiliser la fonction déclenchée lors du défilement de @scroll pour obtenir la position de la barre de défilement de 🎜scroll-view🎜, puis contrôler le refresher- activé active et désactive l'actualisation déroulante personnalisée lorsque le scroll-. la barre de défilement de la vue défile vers le haut, rend refresher-enabled vrai et les autres conditions sont fausses.
🎜🎜Allez directement sur le code pour voir : 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);
	}
  }
})

🎜Fondamentalement, ce sont les seules méthodes d'attribut utilisées pour l'actualisation déroulante ! js:🎜rrreee🎜style:🎜rrreee🎜🎜[Note] L'actualisation de la vue déroulante fera glisser la page vers le haut et déclenchera la liste déroulante. Vous pouvez utiliser cette méthode dans @refresherpulling="onPulling" , comme suit if (e.detail.deltaY // Empêche la page de glisser vers le haut et de déclencher la liste déroulante🎜🎜🎜Démo : 🎜🎜🎜🎜🎜 apparaît simplement en faisant glisser la page. vers le bas n'importe où sur la page déclenchera une liste déroulante. Ce type de problème se produit. Vous pouvez utiliser la fonction supérieure @scrolltoupper="scrolltoupper" et y faire une admission pour résoudre le problème ! 🎜🎜rrreee🎜🎜Vous pouvez également utiliser @scroll="onScroll" pour surveiller la valeur de scroll-top et le laisser se déclencher lorsqu'il est === 0 , c'est-à-dire atteindre le sommet ! Déclenchez à nouveau ! Mais lorsqu'il le rencontre, il doit faire glisser la page et une barre de défilement apparaît, et alors il écoutera ! On peut l'initialiser lors de init pour que ses variables soient initialement à 0 ! 🎜🎜rrreee🎜Recommandé : "🎜tutoriel uniapp🎜"🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!