Comment implémenter la barre de navigation Vue à glissement et rebond inertiel sur un terminal mobile

Cette fois, je vais vous montrer comment implémenter la barre de navigation Vue à glissement et rebond inertiel sur le terminal mobile. Quelles sont les précautions pour implémenter la barre de navigation Vue à glissement et rebond inertiel sur le terminal mobile. Ce qui suit est un cas pratique.

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. je l'ai mieux écrit moi-même), donc je l'ai réglé il y a deux jours, et 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. Les étudiants qui en ont besoin peuvent l'utiliser. le projet npm install ly-tab -S ou yarn add ly-tab. L'utilisation spécifique sera discutée ci-dessous.

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

D'accord, commençons à dire des bêtises. Cela fait presque 3 mois depuis le stage. , j'ai suivi le mentor, 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 d'onglet. Mint-ui utilise en fait le sucre de syntaxe 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 <ly-tab-item/> est cliqué, je peux simplement utiliser la valeur d'index de chaque composant <ly-tab-item/> comme valeur d'identification unique.

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

Tout d'abord, le $children 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 , (this.$parent.$children.length || 1) - 1 la valeur d'index unique de chaque composant <ly-tab-item/>  ? En fait, la fonction Click-to-Switch peut déjà être implémentée ici. Collez le code dans tab-item.vue ci-dessous :

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: 'LyTabItem',
 computed: {
  activeStyle () {
   return {
    color: this.$parent.activeColor,
    borderColor: this.$parent.activeColor,
    borderWidth: this.$parent.lineWidth,
    borderBottomStyle: 'solid'
   }
  }
 },
 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);

Ensuite, vous pouvez utiliser les composants <ly-tab></ly-tab> et <ly-tab-item></ly-tab-item> dans votre projet sans aucun besoin. Réintroduit

Châtaigne

<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>

上面的栗子其实只是tabbar的实现，大家项目中肯定还需要做视图区的切换，在这里简单说一下我目前的做法：

• 使用Vue-router做router-view的切换

• 使用动态组件（可以配合异步组件使用）

我暂时的话好像只用过这两种，不知道大家还有其他什么更好的方法，欢迎分享~

配置项

可以给 <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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读

解决vue2.0路由不显示router-view的问题

vue.js怎么在标签属性中插入变量参数

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!