Utilisez uniapp pour implémenter la fonction de navigation coulissante en plein écran

Utilisez uniapp pour implémenter la fonction de navigation coulissante en plein écran

Dans le développement mobile, la navigation coulissante en plein écran est une méthode d'interaction courante qui peut offrir une bonne expérience utilisateur. uniapp est un framework multiplateforme basé sur Vue.js qui peut facilement implémenter des fonctions de navigation coulissante plein écran. Cet article explique comment utiliser uniapp pour implémenter la navigation coulissante en plein écran et fournit des exemples de code spécifiques.

Tout d'abord, nous devons créer un projet uniapp. Vous pouvez utiliser HBuilderX pour le créer, ou vous pouvez utiliser Vue CLI pour créer un nouveau projet Vue et le convertir en projet uniapp.

Après avoir créé le projet, nous devons créer deux pages sous le dossier pages : navigation.vue et home.vue. Parmi eux, navigation.vue sera utilisé pour afficher la barre de navigation, et home.vue sera utilisé pour afficher la page de contenu.

Ce qui suit est un exemple de code pour navigation.vue :

<template>
  <view class="navigation">
    <scroll-view class="navigation-list" scroll-x>
      <view
        v-for="(item, index) in navList"
        :key="index"
        class="navigation-item"
        :class="{ 'active': activeIndex === index }"
      >
        <text class="item-text">{{ item }}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navList: ["首页", "分类", "购物车", "我的"], // 导航栏显示的文字
      activeIndex: 0, // 当前选中的导航项索引
    };
  },
};
</script>

<style>
.navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #ffffff;
  z-index: 999;
}

.navigation-list {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.navigation-item {
  display: inline-block;
  padding: 0 15px;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
}

.item-text {
  color: #000000;
}

.active {
  color: #ff0000;
}
</style>

Dans le code ci-dessus, nous avons ajouté l'attribut scroll-x sur le composant scroll-view pour activer le défilement horizontal. Utilisez la directive v-for pour afficher chaque option de la barre de navigation, lier le nom de la classe active via :class et changer de style en fonction de l'index de l'élément de navigation actuellement sélectionné.

Ensuite, nous devons implémenter la fonction de glissement pour changer de page dans home.vue. Voici un exemple de code de home.vue :

<template>
  <view class="home">
    <swiper class="swiper-box" @change="handleSwiperChange">
      <swiper-item v-for="(item, index) in navList" :key="index">
        <view class="swiper-item">
          <text>{{ item }}</text>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navList: ["首页", "分类", "购物车", "我的"], // 导航栏显示的文字
      activeIndex: 0, // 当前选中的导航项索引
    };
  },
  methods: {
    handleSwiperChange(event) {
      this.activeIndex = event.detail.current;
    },
  },
};
</script>

<style>
.home {
  margin-top: 50px;
}

.swiper-box {
  width: 100%;
  height: 100%;
}

.swiper-item {
  height: calc(100vh - 50px);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
}

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

Dans le code ci-dessus, nous utilisons le composant swiper pour envelopper l'élément swiper afin d'obtenir l'effet de glissement pour changer de page. En écoutant l'événement change du composant swiper, l'index de l'élément de navigation actuellement sélectionné est mis à jour et la page de contenu est rendue à l'aide de la directive v-for.

Enfin, introduisez les composants de navigation et d'accueil dans App.vue et définissez la hauteur de la page à 100 % dans le style global. Voici un exemple de code d'App.vue :

<template>
  <view class="container">
    <navigation />
    <router-view />
  </view>
</template>

<script>
import navigation from "@/pages/navigation.vue";

export default {
  components: {
    navigation,
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
}
</style>

À ce stade, nous avons terminé l'écriture du code pour implémenter la fonction de navigation coulissante plein écran à l'aide d'uniapp. L'effet coulissant de la barre de navigation est obtenu grâce au composant scroll-view dans navigation.vue, et l'effet de commutation de la page de contenu est obtenu grâce au composant swiper dans home.vue.

Résumé : Le framework uniapp peut être utilisé pour implémenter facilement la fonction de navigation coulissante en plein écran. Il peut être complété à l'aide de composants de défilement et de balayage, combinés avec les styles et le traitement logique correspondants. J'espère que cet article pourra être utile aux développeurs qui découvrent 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!