Vue implements top left and right sliding navigation

Vue implements top left and right sliding navigation

Navigation and other things are often used in daily development, so write an article to record them. The navigation is implemented by clicking the end/beginning position, and the navigation automatically slides out the next item.

Idea: Determine the position of the current clicked item relative to the screen. If the clicked position meets the movable restrictions, perform automatic sliding processing.

The implementation is as follows:

vue

<template>
  <div class="debug-index-page">
    <div class="tab-layout" id="scroller">
      <ul v-for="(tab, idx) in tabList" :key="idx">
        <li
          :id="`tab-${tab.id}`"
          class="tab-item"
          @click="onClickTab(tab)"
          :style="`background:${tab.select ? 'red' : 'none'}`"
        >
          {{ tab.text }}
        </li>
      </ul>
    </div>
  </div>
</template>

JS

export default {

    data() {
        return {
            tabList: [],
        }
    },

    created() {
        let list = [
            "My Nobles",
            "Noble 1",
            "My Noble 2",
            "Noble 3",
            "Noble 4",
            "Noble 5",
            "My Noble 6",
            "My Noble 7",
        ];

        list.forEach((text, idx) => {
            this.tabList.push({
                text,
                id: idx, // tab identifier select: idx == 0, // whether it is selected index: idx // where it is displayed });
        });
    },

    computed: {
        curTab() {
            return this.tabList.find(v => v.select);
        }
    },

    methods: {

        onClickTab(tabInfo) {
            let curTab = this.curTab;
            if (curTab.id == tabInfo.id) return;
            let { index, id } = tabInfo;
            // Slide control let scroller = document.getElementById("scroller");
            let speed = scroller.scrollWidth / this.tabList.length;
            let tab = document.getElementById(`tab-${id}`);
            let bWidth = document.body.clientWidth;
            // Click on the right if (curTab.index < index && tab.clientWidth * index >= bWidth - speed) {
            // Sliding distance scroller.scrollLeft = (index + 2) * speed - bWidth;
            } else if (curTab.index > index && (tab.clientWidth * index - (scroller.scrollLeft + bWidth) < speed)) {
            // Sliding distance scroller.scrollLeft = (index - 1) * speed;
            }

            curTab.select = false;
            this.tabList[index].select = true;
        }
    }
}

less

.debug-index-page {
    width: 100%;
    overflow:hidden;


  .tab-layout {
    width: 100%;
    overflow-x: scroll;
    display: flex;

    .tab-item {
      width: 1rem;
      text-align: center;
    }
  }
}

The above is the navigation display.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Vue implements tab navigation bar and supports left and right sliding function
  • Vue implements left and right sliding effect example code
  • Vue+swiper implements the test question function of sliding left and right
  • Vue uses swiper to switch pictures by sliding left and right
  • Vue uses better-scroll to achieve sliding and left-right linkage
  • Detailed explanation of left and right sliding events on Vue mobile terminal
  • Vue mobile terminal realizes the mobile phone sliding left and right entry animation
  • How to realize left and right sliding effect on mobile terminal in Vue
  • Implementing left and right sliding effect of page switching based on Vue
  • Detailed explanation of the use of Vue's left and right sliding button group component

<<:  How to upgrade CentOS7 to CentOS8 (detailed steps)

>>:  MySQL view introduction and basic operation tutorial

Recommend

Docker installation and configuration steps for Redis image

Table of contents Preface environment Install Cre...

Detailed explanation of HTML form elements (Part 2)

HTML Input Attributes The value attribute The val...

Three Ways to Lock and Unlock User Accounts in Linux

If you already have some kind of password policy ...

Understanding innerHTML

<br />Related articles: innerHTML HTML DOM i...

setup+ref+reactive implements vue3 responsiveness

Setup is used to write combined APIs. The interna...

JavaScript+html to implement front-end page sliding verification (2)

This article example shares the specific code of ...

Detailed use cases of MySql escape

MySQL escape Escape means the original semantics ...

Detailed explanation of the background-position percentage principle

When I was helping someone adjust the code today,...

MYSQL Left Join optimization (10 seconds to 20 milliseconds)

Table of contents 【Function Background】 [Raw SQL]...

Detailed tutorial on installing Tomcat8.5 in Centos8.2 cloud server environment

Before installing Tomcat, install the JDK environ...

Docker container introduction

1. Overview 1.1 Basic concepts: Docker is an open...