Comment implémenter la commutation coulissante des barres de tabulations dans UniAPP

Avec l'avancement continu du développement de l'Internet mobile, le développement d'applications APP a attiré de plus en plus d'attention. Dans le développement d'applications, la barre de tabulation, en tant que modèle de conception de page courant, est largement utilisée dans diverses applications. Dans ce modèle de conception, différents changements de page sont généralement effectués en cliquant sur la barre d'onglets. Mais pour les utilisateurs qui souhaitent parcourir rapidement différentes pages, glisser pour basculer peut être un meilleur choix.

En tant qu'outil de développement multiplateforme, UniAPP nous offre un moyen simple de créer une commutation coulissante de barre de tabulation. Cet article présentera comment UniAPP implémente la commutation coulissante des barres de tabulation, avec un exemple de code détaillé.

1. Idées de mise en œuvre

L'effet que nous voulons obtenir est que lorsque l'utilisateur glisse vers la gauche ou la droite sur la page de la barre d'onglets, il peut automatiquement basculer vers la page correspondante. Ce processus peut être réalisé via le composant swiper d'UniAPP, et le code est très simple. Nous avons juste besoin de faire quelques configurations pour que l'interrupteur coulissant prenne effet.

2. Étapes de mise en œuvre

1. Tout d'abord, recherchez la page de la barre d'onglets dans le projet. Vous pouvez trouver et ouvrir le fichier vue correspondant dans le répertoire des pages.
2. Dans la section modèle, ajoutez le composant swiper. Vous pouvez utiliser la balise uni-swiper pour l'ajouter. L'exemple de code est le suivant :

<template>
  <view>
    <uni-swiper :current="current" :duration="300" :circular="false" :autoplay="false" @change="swiperChange">
      <uni-swiper-item v-for="(item, index) of tabBarList" :key="item.pagePath">
        <component :is="item.pagePath" ref="pageRef"></component>
      </uni-swiper-item>
    </uni-swiper>
  </view>
</template>

Dans ce code, nous utilisons uni-swiper pour implémenter la fonction de glissement et. utilisez l'attribut current Pour définir la page actuelle, circular est défini sur false pour indiquer que le carrousel ne bouclera pas, et la lecture automatique est définie sur false pour indiquer qu'elle ne sera pas lue automatiquement. De plus, nous avons également ajouté un composant à chaque élément de swiper pour représenter le contenu de chaque page dans la barre d'onglets.

3. Dans la partie script, nous devons configurer la tabBar et ajouter quelques fonctions et variables nécessaires. Nous avons besoin du code suivant :

<script>
export default {
  data() {
    return {
      current: 0,
      tabBarList: [
        {
          text: '首页',
          iconPath: '/static/tabbar/home.png',
          selectedIconPath: '/static/tabbar/home-active.png',
          pagePath: '/pages/index/index',
        },
        {
          text: '分类',
          iconPath: '/static/tabbar/category.png',
          selectedIconPath: '/static/tabbar/category-active.png',
          pagePath: '/pages/category/category',
        },
        {
          text: '购物车',
          iconPath: '/static/tabbar/cart.png',
          selectedIconPath: '/static/tabbar/cart-active.png',
          pagePath: '/pages/cart/cart',
        },
        {
          text: '我的',
          iconPath: '/static/tabbar/user.png',
          selectedIconPath: '/static/tabbar/user-active.png',
          pagePath: '/pages/mine/mine',
        },
      ],
    };
  },
  methods: {
    swiperChange(e) {
      this.current = e.detail.current;
      uni.switchTab({
        url: this.tabBarList[this.current].pagePath,
      });
    },
  },
};
</script>

Dans ce code, nous configurons quatre pages tabBar et définissons une variable actuelle pour enregistrer le courant. page. En même temps, nous avons défini une fonction appelée swiperChange pour écouter les événements de changement de page. Dans la fonction swiperChange, nous utilisons la fonction uni.switchTab pour basculer de la page actuelle vers la page correspondante.

De cette façon, nous avons terminé la production de commutation coulissante de barre de tabulation et pouvons prévisualiser et déboguer.

3. Résumé

Cet article présente la méthode d'implémentation d'UniAPP pour la commutation coulissante des barres de tabulation et donne un exemple de code détaillé. En apprenant et en pratiquant ces codes, nous pouvons créer rapidement nos propres applications APP et offrir aux utilisateurs une meilleure expérience utilisateur. Dans le même temps, UniAPP, en tant qu'outil de développement multiplateforme, peut également prendre en charge l'exécution sur plusieurs plates-formes, ce qui réduit considérablement nos difficultés de développement et notre charge de travail.

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!