Handwritten mobile terminal inertial sliding & rebound Vue navigation bar component problem (detailed tutorial)

Some time ago I wrote a mobile terminal inertial sliding & rebound Vue navigation bar component ly-tab. I think it is very practical. You may use it when doing projects. Friends who are interested can learn together

Some time ago, I wrote an adaptive sliding Vue navigation bar component for the mobile terminal. I think it has certain practicality and everyone may use it (of course, if some big guys write better themselves, there is no need), so I sorted it out the past two days. After a while, it has been published to npm and GitHub. Click me to go to npm, and click me to go to the GitHub project. Students in need can npm install ly-tab -S or yarn in the project Add ly-tab is used. The specific usage will be discussed below.

Okay, let’s take a look at the results first

Okay, let’s start talking nonsense. The internship has been almost 3 months. During this time, I have been following the mentor. I have also been exposed to some projects and learned a lot. The projects I have come into contact with are basically mobile projects, and the framework mainly uses Vue. Students who have worked on mobile devices or used mobile apps (bah, bullshit) will definitely find that many times there is a tab navigation bar with a sliding effect similar to the one above. I believe you must have seen it on the homepage of the Nuggets.

Implementation ideas

The project at that time happened to have this demand, so I wanted to be lazy and use the Mint-ui component library directly There are ready-made tabbar and tab-item components. I looked at its implementation source code on github and found that it only implements the switching function but cannot slide. So, if I am too lazy, I have to write it myself.

In fact, it is not difficult to implement the tab switching function. Mint-ui actually uses v-model syntax sugar, just like the following

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

The following is the disassembly of v-model syntax The implementation of sugar

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

Then you only need to implement it in the tab-item component. When it is clicked, let its parent component, which is the ly-tab component, $emit an input event, and pass in an identification event for each tab. The unique value of -item is used as the first parameter. Regarding this unique value, mint-ui requires the user to manually pass in a unique id value to each tab-item through props. The following is the demo implementation of 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>

However, after reading the boss’s thoughts on designing the Tabbar plug-in in vue, I feel that the approach in the article is better, because for the parent component , As long as you know which <ly-tab-item/> is clicked, then I put the index of each <ly-tab-item/> component Wouldn't it be enough to use the index value as its unique identification value?

Then the question is: How to get its own index value inside the tab-item component?

First of all, the $children of the ly-tab component is an array. Since each <ly-tab-item/> component is created sequentially and inserted into the array by push, so each <ly-tab-item/> component is created and pushed to $children , for the <ly-tab-item/> component (this.$parent.$children.length || 1) - 1 Isn’t it just every < ly-tab-item/> The only index value of the component. In fact, the click-to-switch function can already be implemented here. Paste the code in tab-item.vue below:

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>

Regarding the implementation of touch sliding, inertial sliding and rebound effects in tab.vue, there is no discussion here. The method is explained in detail. Interested friends can check it out on github. Click here to check out the project on github. If you want to see a sample demo, you can clone the project locally and run it. You are welcome to correct me if it is not well written. If you think it is useful It would be best if you can get it or be able to help everyone, so you might as well give it a star, haha...

Hey, hey, that’s not right, why did you start asking for a star? The most important thing is I haven’t talked about it yet—how to use ly-tab?

How to use ly-tab

If you want to use ly-tab, you need to download it through npm or yarn in your project Installation:

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

Then import it globally in main.js:

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

Then you can use it in your project <ly-tab></ly-tab&gt ; and <ly-tab-item></ly-tab-item> component without the need to introduce it again

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>

The chestnut above is actually just the implementation of tabbar. You definitely need to switch the view area in your project. Here I will briefly talk about my current approach:

• Using Vue -router switches router-view

• Use dynamic components (can be used with asynchronous components)

I seem to have only used this for the time being Two kinds. I don’t know if you have any other better methods. Welcome to share~

Configuration items

can be given to<ly-tab>&lt ;/ly-tab> The component passes in some configuration items to customize the effect you want

##reBoundExponentNumberInertial rebound index (the larger the value , the greater the amplitude, the longer the inertia rebound distance)10sensitivityNumberSensitivity during inertial sliding (The smaller the value, the greater the resistance). It can be approximated that the time required for the speed to reduce to zero after the hand is released is 1000msreBoundingDuration NumberRebound animation duration360ms

Configuration item	Type	Description	Default value
lineWidth	Number	fixBottom is false when the tabbar bottom border-width	1px
activeColor	String	Activated font color and border-bottom-color	red
fixBottom	Boolean	Whether it is fixed at the bottom of the view (cannot slide when false)	false
additionalX	Number	Approximately Equal to the maximum draggable distance when exceeding the boundary	50px

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

In the vue project, use axios cross-domain processing

Vue-cli project to obtain local json file data Example

Using import and require in JavaScript to package and implement principle analysis

The above is the detailed content of Handwritten mobile terminal inertial sliding & rebound Vue navigation bar component problem (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!