Problème de composant de barre de navigation Vue de glissement et de rebond inertiel de terminal mobile manuscrit (tutoriel détaillé)

Il y a quelque temps, j'ai écrit un composant de barre de navigation Vue coulissante et rebondissante pour terminal mobile, je pense que c'est très pratique. Vous pouvez l'utiliser lorsque vous travaillez sur des projets. Les amis intéressés peuvent apprendre ensemble.

J'ai écrit un composant de barre de navigation Vue coulissante adaptative pour mobile il y a quelque temps. Je pensais qu'il était pratique et que tout le monde pourrait l'utiliser (bien sûr, ce ne serait pas nécessaire si certains des grands l'écrivaient mieux). eux-mêmes), donc je l'ai réglé ces deux derniers jours. Après un certain temps, il a été publié sur npm et GitHub. Cliquez sur moi pour accéder à npm et cliquez sur moi pour accéder au projet GitHub. projet

ou npm install ly-tab -S . L'utilisation spécifique sera mentionnée ci-dessous. yarn add ly-tab

D'accord, regardons d'abord les résultats

D'accord, commençons à dire des bêtises. Le stage dure presque 3 mois, et moi. en suivant le mentor pendant cette période, j'ai également été exposé à certains projets et j'ai beaucoup appris. Les projets avec lesquels j'ai été en contact sont essentiellement des projets mobiles, et le framework utilise principalement Vue. Les étudiants qui ont travaillé sur des appareils mobiles ou utilisé des applications mobiles (bah, conneries) constateront certainement qu'il y a souvent une barre de navigation par onglets avec un effet coulissant similaire à celui ci-dessus. Je pense que vous avez dû le voir sur la page d'accueil du. Pépites.

Idée de mise en œuvre

Le projet à cette époque avait ce genre de demande, alors je voulais être paresseux et utiliser le Mint- Bibliothèque de composants ui directement Il existe des composants de barre d'onglets et d'éléments d'onglet prêts à l'emploi. J'ai regardé son code source d'implémentation sur github et j'ai découvert qu'il implémentait uniquement la fonction de commutation mais ne pouvait pas glisser. Donc, si je suis trop paresseux, je dois écrire. moi-même.

En fait, il n'est pas difficile d'implémenter la fonction de changement de tabulation. Mint-ui utilise en fait le sucre syntaxique du modèle v, comme indiqué ci-dessous

<ly-tab v-model="selected">
  <ly-tab-item></ly-tab-item>
</ly-tab>

Ce qui suit est le démontage de v. - L'implémentation du sucre syntaxique du modèle

<ly-tab :value="selected" @input="selected = arguments[0]">
  <ly-tab-item></ly-tab-item>
</ly-tab>

ne doit alors être implémentée que dans le composant tab-item. Lorsqu'on clique dessus, laissez son composant parent, qui est le composant ly-tab, $émettre un. événement d'entrée et transmettre un événement d'entrée. La valeur unique qui identifie chaque élément d'onglet est utilisée comme premier paramètre. Concernant cette valeur unique, mint-ui demande à l'utilisateur de transmettre manuellement une valeur d'identifiant unique à chaque élément d'onglet. props. Voici l'implémentation de la démo de Mint UI :

<mt-tabbar v-model="selected">
  <mt-tab-item id="订单">
    <img slot="icon" src="http://placehold.it/100x100">
    <span slot="label">订单</span>
  </mt-tab-item>
 </mt-tabbar>

Cependant, après avoir lu les réflexions du patron sur la conception du plug-in Tabbar dans vue, je pense que l'approche décrite dans l'article sera meilleure, car pour le composant parent Par exemple, tant que vous savez sur lequel

est cliqué, je peux simplement utiliser la valeur d'index de chaque composant <ly-tab-item/> comme valeur d'identification unique. <ly-tab-item/>

Alors la question est : Comment obtenir sa propre valeur d'index à l'intérieur du composant tab-item ?

Tout d'abord, le

du composant ly-tab est un tableau, puisque chaque composant <ly-tab-item/> est créé séquentiellement et inséré dans le tableau par poussée, donc lorsque chaque composant <ly-tab-item/> est créé et poussé vers $children , pour , $children n'est-il pas la valeur d'index unique de chaque (this.$parent.$children.length || 1) - 1 composant ? En fait, la fonction Click-to-Switch peut déjà être implémentée ici. Collez le code dans tab-item.vue ci-dessous : <ly-tab-item/>

tab-item.vue

<template>
 <a class="ly-tab-item"
    :style="$parent.value === id ? activeStyle : {}"
    @click="$parent.$emit(&#39;input&#39;, id)">
  <p class="ly-tab-item-icon"><slot name="icon"></slot></p>
  <p class="ly-tab-item-label"><slot></slot></p>
 </a>
</template>
<script>
export default {
 name: &#39;LyTabItem&#39;,
 computed: {
  activeStyle () {
   return {
    color: this.$parent.activeColor,
    borderColor: this.$parent.activeColor,
    borderWidth: this.$parent.lineWidth,
    borderBottomStyle: &#39;solid&#39;
   }
  }
 },
 data () {
  return {
   id: (this.$parent.$children.length || 1) - 1
  }
 }
}
</script>
<style lang="scss">
.ly-tab-item {
 text-decoration: none;
 text-align: center;
 .ly-tab-item-icon {
  margin: 0 auto 5px;
 }
 .ly-tab-item-label {
  margin: 0 auto 10px;
  line-height: 18px;
 }
}
</style>

À propos des effets du glissement tactile, du glissement inertiel et du rebond dans tab.vue sont implémentés ici Là Il n'y a aucun moyen d'entrer dans les détails. Les amis intéressés peuvent le consulter sur github. Cliquez ici pour consulter le projet sur github. Si vous souhaitez voir un exemple de démo, vous pouvez cloner le projet localement et l'exécuter. bon en écriture, n'hésitez pas à me corriger. Si vous pensez que c'est utile ou que cela peut aider tout le monde, alors autant lui donner une étoile, haha...

Hé, hé, ce n'est pas vrai, pourquoi avez-vous commencé à demander une étoile ? La chose importante n'a pas encore été discutée : comment utiliser ly-tab ?

Comment utiliser ly-tab

Si vous souhaitez utiliser ly-tab, vous devez le télécharger via npm ou Yarn dans votre Installation du projet :

npm install ly-tab -S
or
yarn add ly-tab

Puis importez-le globalement dans main.js :

import Vue from 'vue';
import LyTab from 'ly-tab';
Vue.use(LyTab);

Vous pouvez ensuite utiliser les composants

et <ly-tab></ly-tab> dans votre projet sans aucun besoin. Réintroduit <ly-tab-item></ly-tab-item>

Chestnut

<ly-tab v-model="selected" fixBottom>
 <!-- selected是你自己定义的一个在data中用于存放当前tab-item的索引值的变量 -->
 <ly-tab-item v-for="(item, index) in tabList" :key="index">
  {{item.itemName}}
 </ly-tab-item>
</ly-tab>

Le marron ci-dessus n'est en fait que l'implémentation de la barre d'onglets. Vous devez absolument changer la zone d'affichage dans votre projet. ici Regardons mon approche actuelle :

• Utiliser Vue-router pour changer de vue du routeur

• Utiliser des composants dynamiques (peut être utilisé avec des composants asynchrones composants)

Il semble que je n'ai utilisé que ces deux-là pour le moment. Je ne sais pas si vous avez d'autres méthodes meilleures ~

Éléments de configuration

Vous pouvez transmettre certains éléments de configuration au composant

pour personnaliser l'effet souhaité<ly-tab></ly-tab>

配置项	类型	描述	默认值
lineWidth	Number	fixBottom为false时tabbar底部border-width	1px
activeColor	String	激活状态下字体color以及border-bottom-color	red
fixBottom	Boolean	是否固定在视图底部（为false时不可滑动）	false
additionalX	Number	近似等于超出边界时最大可拖动距离	50px
reBoundExponent	Number	惯性回弹指数(值越大，幅度越大，惯性回弹距离越长)	10
sensitivity	Number	惯性滑动时的灵敏度(值越小，阻力越大),可近似认为手松开后速度减为零所需时间	1000ms
reBoundingDuration	Number	回弹动画duration	360ms

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Dans le projet vue, utilisez le traitement inter-domaines axios

Projet Vue-cli pour obtenir le fichier json local Exemple de données

Utilisez import et require en JavaScript pour empaqueter et implémenter l'analyse de principe

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!