Shulou(Shulou.com)06/03 Report--

This article shows you how to write mobile inertia slide or rebound Vue navigation bar components, the content is concise and easy to understand, can definitely brighten your eyes, through the detailed introduction of this article, I hope you can get something.

Let's see the effect first.

All right, let's start talking nonsense. I've been an intern for almost 3 months. During this period, I've also come into contact with some projects and learned a lot with the mentor. The projects I've come into contact with are basically mobile projects, and the framework mainly uses Vue. Students who have done mobile or used mobile APP (Bah, bullshit) will certainly find that there is a tab navigation bar with a sliding effect like the one above. I'm sure you've seen it on the home page of the Nuggets.

Realization idea

At that time, there happened to be such a requirement in the project, so I wanted to be lazy and directly use the ready-made tabbar and tab-item components in the Mint-ui component library. Github took a look at its implementation source code and found that it only realized the switching function but could not slide, so, so I had to write it myself if I couldn't steal it.

In fact, it is not difficult to achieve tab switching function alone. You can see that mint-ui actually uses v-model syntax sugar, like the following

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

Then you only need to implement in the tab-item component that when it is clicked, let its parent component, namely ly-tab component $emit, have an input event, and pass in a unique value identifying each tab-item as the first parameter. With regard to this unique value, mint-ui requires users to manually pass a unique id value to each tab-item through props, as shown below:

Order

However, after reading the thinking of designing the Tabbar plug-in in the boss's vue, I think the approach in the article would be better, because for the parent component, as long as you know which one to click on, then I just take the index index value of each component as its unique identification value.

So the question arises: how do you get your own index value inside the tab-item component?

First of all, the $children of the ly-tab component is an array, and since each component is created in turn and inserted by push, when each component is created and push to $children, (this.$parent.$children.length | | 1)-1 is not the unique index value for each component. In fact, the function of clicking and switching here can already be realized. Paste the code from tab-item.vue below:

Tab-item.vue

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}} .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;}}

There is no way to elaborate on the realization of touch sliding, inertial sliding and springback in tab.vue. Interested partners can check it on github and click on me to github to view the project. If you want to see an example of demo, you can run the clone project locally. If it is not well written, you are welcome to correct it. If you think it is useful or can help you, then you might as well click a star. Ha ha.

Oh, oh, isn't that right? why did you start to ask for star? the most important thing hasn't been mentioned yet-- how to use ly-tab?

How to use ly-tab

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

Npm install ly-tab-Soryarn add ly-tab

Then introduce globally in main.js:

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

Then you can use whatever components you want in your project without having to reintroduce them.

Chestnut

{{item.itemName}}

In fact, the chestnut above is only the implementation of tabbar. You must also need to switch the view area in the project. Here is a brief description of my current practice:

Use Vue-router to switch router-view

Use dynamic components (can be used with asynchronous components)

I seem to have only used these two for the time being. I don't know if there is any other better way. Welcome to share.

Configuration item

You can pass in some configuration items to the component to customize the effect you want

Configuration item type description: when the default value lineWidthNumberfixBottom is false, whether the font color and border-bottom-colorredfixBottomBoolean are fixed at the bottom of the view when the border-width1pxactiveColorString is activated at the bottom of the tabbar (cannot slide when it is false) falseadditionalXNumber is approximately equal to the maximum draggable distance beyond the boundary 50pxreBoundExponentNumber inertia springback index (the greater the value, the greater the amplitude, the longer the inertia springback distance) the sensitivity of 10sensitivityNumber inertia sliding (the smaller the value (the greater the resistance), it can be approximately considered that the time required for the speed to decrease to zero after the release of the hand 1000msreBoundingDurationNumber springback animation duration360ms

The above content is how to write the mobile inertia slide or rebound Vue navigation bar components, have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.