So implementieren Sie die Vue-Navigationsleiste mit Trägheitsgleiten und -rückprall auf einem mobilen Endgerät

Dieses Mal zeige ich Ihnen, wie Sie die inertiale gleitende und zurückprallende Vue-Navigationsleiste auf dem mobilen Endgerät implementieren. Das Folgende ist ein praktischer Fall. Ich habe vor einiger Zeit eine adaptive Vue-Navigationsleistenkomponente für Mobilgeräte geschrieben, die eine gewisse Praktikabilität hat und jeder sie verwenden kann (natürlich ist es nicht nötig, wenn einige große Leute selbst besser schreiben), also ich Ich habe es vor zwei Tagen aussortiert und es wurde auf npm und GitHub veröffentlicht. Klicken Sie auf mich, um zu npm zu gelangen, und klicken Sie auf mich, um zum GitHub-Projekt zu gelangen >. Auf die konkrete Verwendung wird weiter unten eingegangen.

Okay, schauen wir uns zuerst die Ergebnisse annpm install ly-tab -S yarn add ly-tab

Okay, fangen wir an, Unsinn zu reden, und ich schon Während ich dem Mentor folgte, habe ich auch einige Projekte kennengelernt und viel gelernt. Bei den Projekten, mit denen ich in Kontakt gekommen bin, handelt es sich im Wesentlichen um mobile Projekte, und das Framework verwendet hauptsächlich Vue. Studenten, die auf mobilen Geräten gearbeitet oder mobile Apps verwendet haben (bah, Bullshit), werden auf jeden Fall feststellen, dass es oft eine Tab-Navigationsleiste mit einem Schiebeeffekt gibt, der dem oben gezeigten ähnelt. Ich glaube, Sie haben es auf der Homepage von gesehen Nuggets.

Implementierungsidee

Das damalige Projekt hatte zufällig eine solche Nachfrage, also wollte ich faul sein und die Mint- verwenden. ui-Komponentenbibliothek direkt Es gibt vorgefertigte Tabbar- und Tab-Item-Komponenten. Ich habe mir den Implementierungsquellcode auf Github angesehen und festgestellt, dass er nur die Umschaltfunktion implementiert, aber nicht verschieben kann. Wenn ich also zu faul bin, muss ich schreiben es selbst. Tatsächlich ist es nicht schwierig, die Tab-Umschaltfunktion zu implementieren, die tatsächlich V-Modell-Syntaxzucker verwendet, wie unten gezeigt

Das Folgende ist die Demontage von v - Die Implementierung des modellsyntaktischen Zuckers

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

muss dann nur in der Tab-Item-Komponente implementiert werden. Wenn darauf geklickt wird, sendet die übergeordnete Komponente, die ly-tab-Komponente, ein $emit Geben Sie ein Eingabeereignis ein und übergeben Sie ein Eingabeereignis. Der eindeutige Wert, der jedes Tab-Element identifiziert, wird als erster Parameter verwendet. In Bezug auf diesen eindeutigen Wert erfordert mint-ui, dass der Benutzer manuell einen eindeutigen ID-Wert an jedes Tab-Element übergibt Requisiten. Das Folgende ist die Mint UI-Demo-Implementierung:

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

Nachdem ich jedoch die Gedanken des Chefs zum Entwerfen des Tabbar-Plug-Ins in Vue gelesen habe, bin ich der Meinung, dass der Ansatz im Artikel besser sein wird, weil für die übergeordnete Komponente Solange Sie beispielsweise wissen, auf welche

geklickt wird, kann ich einfach den Indexwert jeder

-Komponente als eindeutigen Identifikationswert verwenden.

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

Dann ist die Frage: Wie erhält man seinen eigenen Indexwert innerhalb der Tab-Item-Komponente? <ly-tab-item/> <ly-tab-item/> Zuallererst ist das

der Ly-Tab-Komponente ein Array, da Jede -Komponente wird nacheinander erstellt und per Push in das Array eingefügt. Wenn also jede <ly-tab-item/> - Ist bei tab-item/>-Komponenten nicht

der eindeutige Indexwert jeder

-Komponente? Tatsächlich lässt sich die Click-to-Switch-Funktion hier bereits umsetzen. Fügen Sie den Code unten in tab-item.vue ein:

$children tab-item.vue$children(this.$parent.$children.length || 1) - 1 <ly-tab-item/> Informationen zu den Auswirkungen von Berührungsgleiten, Trägheitsgleiten und Rückprall in tab.vue werden hier implementiert Es gibt keine Möglichkeit, auf Details einzugehen. Klicken Sie hier, um sich das Projekt auf Github anzusehen. Wenn Sie dies nicht tun, können Sie es auch lokal ausführen Gut im Schreiben, du kannst mich gerne korrigieren, wenn du denkst, dass es nützlich ist oder allen helfen kann, dann kannst du ihm genauso gut einen Stern geben, haha...

Hey, hey, das ist nicht richtig, Warum hast du angefangen, nach einem Stern zu fragen? Das Wichtige wurde noch nicht besprochen – wie man ly-tab benutzt?

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

So verwenden Sie ly-tab

Wenn Sie ly-tab verwenden möchten, müssen Sie es über npm oder Yarn in Ihrem herunterladen Projektinstallation: Dann importieren Sie es global in main.js:

Anschließend können Sie die Komponenten

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

und

in Ihrem Projekt verwenden, ohne dass dies erforderlich ist

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

Kastanie<ly-tab></ly-tab> <ly-tab-item></ly-tab-item>

<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怎么在标签属性中插入变量参数

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Vue-Navigationsleiste mit Trägheitsgleiten und -rückprall auf einem mobilen Endgerät. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!