Write the ly-tab component of the mobile terminal inertial slide & rebound Vue navigation bar, and the terminal inertial slide

Write the ly-tab component of the mobile terminal inertial slide & rebound Vue navigation bar, and the terminal inertial slide

Some time ago I wrote a mobile terminal adaptive sliding Vue navigation bar component. I think it is practical and you may use it. (Of course, if some bosses write better, it is unnecessary ), so I sorted it out two days ago. Now it has been released to npm and GitHub. Click me to npm and click me to GitHub. If you need it, you can go to the project.npm install ly-tab -S Oryarn add ly-tabUsage.

Okay. Let's see the effect first.

 

Okay, I started to talk nonsense. I 've been practicing for almost three months. During this time, I 've been in touch with some projects with my mentor and learned a lot, most of the projects that come into contact are mobile projects, and the framework mainly uses Vue. Those who have worked on mobile terminals or mobile apps will surely find that many times there is a tab navigation bar similar to the sliding effect above, I believe you will certainly see it on the Nuggets homepage.

Implementation

This was also the case in the project at that time, so I wanted to use the tabbar and tab-item components available in the Mint-ui component library, on github, I checked its implementation source code and found that it only implemented the switching function but could not slide. so, I had to write it myself if I was too lazy to steal it.

In fact, it is not difficult to implement the tab switch function alone. the mint-ui uses the v-model syntax sugar, just like the following:

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

The following describes how to disassemble the v-model syntax sugar.

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

Then, you only need to make the parent component, namely the ly-tab component $ emit, an input event when you are clicked in the tab-item component, enter a unique value that identifies each tab-item as the first parameter, the mint-ui method requires you to manually pass 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 = "order">  <span slot = "label"> order </span> </mt-tab-item> </mt-tabbar>

However, after thinking about designing the Tabbar plug-in daxie's vue, I think the practices in this article will be better, because for the parent component <ly-tab/>, you only need to know which one you click. <ly-tab-item/> That's all. <ly-tab-item/> Does the index value of a component have to be the Unique Identifier value.

So the question is: How can I get my index value inside the tab-item component?

First, the ly-tab component$children Is an array, because each <ly-tab-item/> component is created in sequence and inserted by push, therefore, each <ly-tab-item/> component is created and pushed$childrenFor the <ly-tab-item/> component(this.$parent.$children.length || 1) - 1 Not every <ly-tab-item/> The unique index value of the component. In fact, you can click the switch function here. The code in the tab-item.vue is pasted below:

Tab-item.vue

<template> <a class="ly-tab-item"    :style="$parent.value === id ? activeStyle : {}"    @click="$parent.$emit('input', id)">  <div class="ly-tab-item-icon"><slot name="icon"></slot></div>  <div class="ly-tab-item-label"><slot></slot></div> </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>

About tab. the Touch slide, inertial slide, and rebound equivalent fruits in vue cannot be described in detail here. If you are interested, you can view them on github. Click here to view the project on github, if you want to see the demo, you can clone the project and run it locally. If you are not well-written, please let us know. If you think it is useful or helpful, you might as well click a star, haha ......

Alas, no, no. Why did we start to ask for star? The most important thing is that we haven't talked about it yet-how can we use ly-tab?

How to Use ly-tab

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

npm install ly-tab -Soryarn add ly-tab

Next we will introduce 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> And<ly-tab-item></ly-tab-item> The component does not need to be introduced again

Chestnuts

<Ly-tab v-model = "selected" fixBottom> <! -- Selected is a variable defined by you to store the index value of the current tab-item in data --> <ly-tab-item v-for = "(item, index) in tabList ": key =" index "> {item. itemName }}</ly-tab-item> </ly-tab>

In fact, the above chestnuts are only the implementation of tabbar. You must switch the view area in your project. Here I will briefly introduce my current practice:

• Use Vue-router for router-view switching
• Use Dynamic components (can be used with asynchronous components)

I have only used these two methods for the time being. I don't know what other better methods are available. Please share them ~

Configuration item

You can<ly-tab></ly-tab> Component input some configuration items to customize the effect you want

Configuration item	Type	Description	Default Value
LineWidth	Number	Border-width at the bottom of tabbar when fixBottom is false	1px
ActiveColor	String	Font color and border-bottom-color when activated	Red
FixBottom	Boolean	Whether it is fixed at the bottom of the view (false cannot be slide)	False
AdditionalX	Number	Approximately equal to the maximum drag distance when the boundary is exceeded	50px
ReBoundExponent	Number	Inertial rebound index (larger value, larger amplitude, longer inertial rebound distance)	10
Sensiti.pdf	Number	The sensitivity of inertial slide (the smaller the value, the greater the resistance) can be considered as the time required to reduce the speed to zero after the hand is released.	1000 ms
ReBoundingDuration	Number	Rebound animation duration	360 ms

Summary

The above is a small Editor to introduce you to write a mobile terminal inertial slide & rebound Vue navigation bar component ly-tab, hope to help you, if you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!