手書きモバイル端末の慣性スライドとリバウンド Vue ナビゲーション バー コンポーネントの問題 (詳細なチュートリアル)

少し前に、モバイル端末の慣性スライドとリバウンドの Vue ナビゲーション バー コンポーネント ly-tab を書きました。これは、プロジェクトを実行するときに使用できると思います。興味がある人は一緒に学習してください。モバイル端末用のアダプティブ スライディング Vue ナビゲーション バー コンポーネントは、ある程度の実用性があり、誰でも使用できると思います (もちろん、偉い人が自分でうまく作成すれば、必要はありません)。そこで 2 つに分類しました。数日前にリリースされました。npm と GitHub に移動します。私をクリックして npm に移動し、私をクリックして GitHub プロジェクトに移動します。必要な学生は、npm install ly-tab -S または yarn add ly-tab が使用されます。具体的な使用法については以下で説明します。

それでは、まず効果を見てみましょうnpm install ly-tab -S 或者 yarn add ly-tab 使用，具体用法下面会讲到。

好了，先看看效果吧

 

好的，开始废话了，实习差不多3个月了，这段时间跟着导师大佬也有接触过一些项目，也学到了不少东西，接触到的项目基本都是移动端项目，而且框架主要用的是Vue。做过移动端或者用过移动端APP（呸，屁话）的同学肯定会发现很多时候都会有类似上面这种有滑动效果的tab导航栏，相信大家肯定在掘金的首页就看到过。

实现思路

当时的项目中恰好也有这种需求，于是我想偷个懒直接使用 Mint-ui 组件库里现成的tabbar和tab-item组件，github上看了下它的实现源码发现只实现了切换功能但不能滑动，so，懒偷不了就只好自己写咯。

其实单单实现tab切换功能是不难的，看mint-ui使用的其实是v-model语法糖，就像下面这样

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

下面是拆解v-model语法糖的实现

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

然后只需要在tab-item组件内实现当自己被点击时，让其父组件也就是ly-tab组件 $emit 一个 input 事件，并传入一个标识每个tab-item的唯一值作为第一个参数，关于这个唯一值，mint-ui的做法需要用户自己手动给每个tab-item通过props传入一个唯一的id值，如下为Mint UI的Demo实现：

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

但是，在看过大佬的 vue当中设计Tabbar插件时的思考 后觉得文章中的那种做法会更好一点，因为对于父组件 来说，只要知道点击的是哪个 <ly-tab-item/> 就行了啊，那么我把每个 <ly-tab-item/> 组件的 index 索引值作为它的唯一标识值不就行了吗。

那么问题来了：怎么在tab-item组件内部取到自己的 index 值呢?

首先ly-tab组件的 $children 是一个数组，由于每个 <ly-tab-item/> 组件是依次创建并通过push的方式插入该数组，所以在每个 <ly-tab-item/> 组件创建并push到 $children 时，对于 <ly-tab-item/> 组件来说 (this.$parent.$children.length || 1) - 1 不就是每个 <ly-tab-item/> 组件唯一的 index 值了啊。实际上，到这里点击切换的功能就已经可以实现了。下面贴上tab-item.vue中的代码：

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>

关于tab.vue中触摸滑动、惯性滑动以及回弹等效果实现在这里就没办法详细讲了，有兴趣的小伙伴可以到github上查看， 点我去github查看项目 ，如果想看示例demo可以clone项目到本地跑一跑，写得不好的地方欢迎大家指正，如果觉得用得着或者能够帮到大家的话最好了，那也不妨点个star吧，哈哈......

哎哎哎，不对不对，怎么就开始求star了，最重要的还没讲呢—— ly-tab怎么使用呢？

如何使用 ly-tab

小伙伴们如果想使用ly-tab，需要在你的项目中通过npm或者yarn下载安装：

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

接着在main.js中全局引入：

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

之后你就可以在你项目中任意使用 <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>

🎜さて、くだらない話を始めましょう。私はほぼ 3 か月間インターンをしています。この間、メンターと一緒にいくつかのプロジェクトに触れてきました。私が関わったプロジェクトは基本的にモバイルプロジェクトであり、フレームワークは主に Vue を使用します。モバイル デバイスで作業したり、モバイル アプリを使用したことのある学生は (まあ、でたらめです)、上記のようなスライド効果のあるタブ ナビゲーション バーが何度も存在することに気づくでしょう。きっと、このバーのホームページで見たことがあるはずです。ナゲット。 🎜🎜実装アイデア🎜🎜 当時のプロジェクトにはたまたまこの需要があったので、怠けて Mint を使用したいと思いました。 ui コンポーネントを直接ライブラリに用意されている tabbar コンポーネントと tab-item コンポーネントの実装ソースコードを github で見たところ、切り替え機能を実装しているだけで、スライドはできないことがわかりました。自分で書かなければなりません。 🎜🎜実際、タブ切り替え機能の実装は難しくありません。Mint-uiでは以下に示すようにv-model構文sugarを使用しています🎜rrreee🎜以下はv-model構文sugarの実装を逆アセンブリしたものです🎜rrreee🎜そして、これを tab-item コンポーネントに実装する必要があります。クリックされたときに、その親コン​​ポーネント (ly-tab コンポーネント) に入力イベントを $emit させ、各タブを識別する一意の値を渡します。この一意の値について、mint-ui では、ユーザーが props を通じて各タブ項目に一意の ID 値を手動で渡す必要があります。以下は、Mint UI のデモ実装です: 🎜rrreee🎜 ただし、その後。 Tabbar プラグインを設計するときにそれについて考えた後、親コンポーネント がどちらであるかがわかっている限り、この記事のアプローチの方が良いと感じました。 <ly-tab-item is clicked /> であれば、各 <ly-tab-item/> のインデックス値を使用できます。一意の識別値として。 🎜🎜次に問題は、tab-item コンポーネント内で独自のインデックス値を取得する方法です。🎜🎜 まず第一に、ly-tab コンポーネントの $children は配列であるためです。 ;ly- tab-item/> コンポーネントは順番に作成され、プッシュによって配列に挿入されるため、各 <ly-tab-item/> コンポーネントが作成されて $children にプッシュされます。 、 <ly-tab-item/> コンポーネントの場合、 (this.$parent.$children.length || 1) - 1 は各 < に対してのみではありません。 ly-tab-item /> コンポーネントの一意のインデックス値。実際、ここではクリックしてスイッチ機能をすでに実装できます。以下の tab-item.vue にコードを貼り付けます: 🎜🎜tab-item.vue🎜rrreee🎜 tab.vue でのタッチ スライド、慣性スライド、リバウンド効果の実装については、ここでは詳しく説明できません。興味のある方は、github でプロジェクトをチェックしてください。サンプルのデモを見たい場合は、プロジェクトをローカルに複製して実行してください。あまりよく書かれていませんが、役に立つ、または役立つと思われる場合は、星をクリックしてください (笑)。まだ説明されていません - ly-tabの使い方は？ 🎜🎜ly-tab の使用方法🎜🎜 ly-tab を使用したい場合は、npm を渡すか、ダウンロードしてインストールする必要があります糸: 🎜rrreee🎜 次に、main.js でグローバルに導入します: 🎜rrreee🎜 その後、 <ly-tab></ly-tab> と <ly-tab; を使用できます。 -item></ly-tab-item> コンポーネントを再度導入する必要はありません🎜🎜チェストナット🎜rrreee🎜 上のチェストナットは実際には単なるタブバーです。プロジェクト内のビュー領域を切り替える必要があるのは間違いありません。ここで私の現在のアプローチについて簡単に説明します: 🎜

• 🎜ルータービューの切り替えとして Vue-router を使用します🎜 li>
• 🎜動的コンポーネントを使用する (非同期コンポーネントでも使用できます)🎜

🎜今のところこの 2 つだけを使用しているようです。他に何があるかはわかりません。良い方法です。共有を歓迎します~🎜🎜構成アイテム🎜🎜いくつかの構成アイテムを <ly-tab></ly-tab> コンポーネントに渡すことができます。カスタマイズする 必要な効果を定義します🎜

設定項目	Type	説明	デフォルト値
lineWidth	Number	fixBottomはタブバーの下枠幅	1pxの場合はfalseになります
アクティブカラー	文字列	フォントの色と border-bottom-color	red
fixBottom	Boolean	がアクティブ化されたときにビューの下部に固定されるかどうか(falseの場合はスライドできません)	false
AdditionalX	Number	おおよそ、境界を越えた際のドラッグ可能な最大距離に等しい	50px
reBoundExponent	Number	慣性反発指数(値が大きいほど振幅が大きく、慣性反発距離が長くなります)	10
感度	数値	慣性滑り時の感度（数値が小さいほど抵抗が大きくなります）、手を放してから速度がゼロになるまでの時間で近似できます	1000ms
reBoundingDuration	数値	リバウンドアニメーション期間	360ms

上記は、将来あなたのために役立つことを願っています。

関連記事:

vueプロジェクトでaxiosクロスドメイン処理を使用

Vue-cliプロジェクトでローカルjsonファイルデータを取得

JavaScriptでimportとrequireを使用してパッケージ化後の原理分析を実装

以上が手書きモバイル端末の慣性スライドとリバウンド Vue ナビゲーション バー コンポーネントの問題 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。