Comment modifier le style d'actualisation déroulant dans Uniapp-uni-app-php.cn

Comment modifier le style d'actualisation déroulant dans Uniapp

PHPz

Libérer： 2023-04-17 11:07:29

original

3413 Les gens l'ont consulté

Dans Uniapp, l'actualisation déroulante est une fonction très courante, mais le style d'actualisation déroulant par défaut peut ne pas répondre aux besoins de conception de l'interface utilisateur de l'application. Par conséquent, nous devons modifier le style d’actualisation de la liste déroulante. Cet article explique comment modifier le style d'actualisation de la liste déroulante dans Uniapp.

Tout d'abord, l'actualisation déroulante dans Uniapp est implémentée à l'aide du composant uni-scroll-view. Par conséquent, nous devons utiliser ce composant pour effectuer des modifications d'actualisation déroulantes.

Voici les étapes spécifiques pour modifier le style d'actualisation déroulant d'uni-scroll-view :

Étape 1 : Ajoutez le composant uni-scroll-view au modèle

Ajoutez le composant uni-scroll-view à le modèle et placez-le dedans. Ajoutez divers attributs nécessaires à l'actualisation du menu déroulant.

<template>
  <view>
    <uni-scroll-view class="scroll-view"
      :scroll-top="scrollTop"
      @scrolltolower="scrollToLower"
      @scroll="scroll"
      @refresh="refresh"
      :scroll-with-animation="scrollWithAnimation"
      :enable-back-to-top="enableBackToTop"
      :refresher-enabled="true"
      :refresher-threshold="45"
      :refresher-default-style="refresherDefaultStyle"
      :refresher-background-color="refresherBackgroundColor"
      :text-style="textStyle">

      <!-- 下拉刷新的容器组件 -->
      <view class="refresh-container">
        <view v-if="isRefreshing" class="loading-box">
          <loading class="loading" type="circular" size="23"></loading>
          <text class="loading-text">正在刷新...</text>
        </view>
        <view v-else class="arrow-icon-box">
          <image :src="arrowIconSrc" class="arrow-icon" :style="{transform: pullDownStyle}" />
          <text class="refresh-text">{{ refreshText }}</text>
        </view>
      </view>

      <!-- 加载更多的容器组件 -->
      <slot></slot>
      <view v-if="isLoadingMore" class="loading-more">{{ loadingMoreText }}</view>
    </uni-scroll-view>
  </view>
</template>

Copier après la connexion

Dans le modèle ci-dessus, nous avons utilisé refresher-enabled属性，并将其设置为true, activant ainsi la fonction tirer pour actualiser.

Étape 2 : Ajoutez un style d'actualisation déroulant avec style

Ajoutez différents styles nécessaires pour un rafraîchissement déroulant avec style.

<style>
  .refresh-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 45px;
    line-height: 45px;
    color: #999;
  }

  .arrow-icon-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 45px;
    line-height: 45px;
  }

  .arrow-icon {
    width: 23px;
    height: 23px;
  }

  .refresh-text {
    margin-left: 12px;
    font-size: 14px;
  }

  .loading-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 45px;
    line-height: 45px;
    color: #999;
  }

  .loading {
    margin-left: 12px;
    margin-right: 12px;
  }

  .loading-text {
    font-size: 14px;
  }
</style>

Copier après la connexion

Dans le style ci-dessus, nous avons modifié les styles du composant du conteneur d'actualisation déroulant, de l'icône de flèche, du texte d'actualisation, du chargement du texte et d'autres éléments.

Étape 3 : Ajouter les données et les événements d'actualisation déroulante dans le script

Ajoutez les données et les événements nécessaires à l'actualisation déroulante dans le script.

<script>
  export default {
    data() {
      return {
        isRefreshing: false,
        refreshText: '下拉刷新',
        arrowIconSrc: 'static/img/arrow-down.png',
        pullDownStyle: 'rotate(0deg)',
      }
    },
    methods: {
      // 下拉刷新事件
      refresh() {
        this.isRefreshing = true;
        this.refreshText = '正在刷新';
        this.arrowIconSrc = 'static/img/loading.gif';
        this.pullDownStyle = 'rotate(360deg)';
        setTimeout(() => {
          this.isRefreshing = false;
          this.refreshText = '下拉刷新';
          this.arrowIconSrc = 'static/img/arrow-down.png';
          this.pullDownStyle = 'rotate(0deg)';
        }, 2000);
      },
      // 滚动事件
      scroll(e) {
        // 滚动时记录滚动位置
        this.scrollTop = e.detail.scrollTop;
      },
      // 滚动到底部事件
      scrollToLower() {
        if (!this.isLoadingMore) {
          this.isLoadingMore = true;
          this.loadingMoreText = '加载中...';
          setTimeout(() => {
            this.isLoadingMore = false;
            this.loadingMoreText = '上拉加载更多';
          }, 2000);
        }
      },
    },
  }
</script>

Copier après la connexion

Dans l'événement ci-dessus, nous avons implémenté des fonctions telles que le menu déroulant pour actualiser et faire défiler vers le bas pour en charger davantage.

Résumé

Ce qui précède concerne la façon de modifier le style d'actualisation de la liste déroulante dans Uniapp. Grâce aux étapes ci-dessus, nous pouvons personnaliser le style d'actualisation déroulant et implémenter la fonction d'actualisation déroulante. J'espère que ce tutoriel vous sera utile.

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!