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

der eindeutige Indexwert jeder

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

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:

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

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> 组件传入一些配置项以自定义你想要的效果

相信看了本文案例你已经掌握了方法，更多精彩请关注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!