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

MySQL transaction, isolation level and lock usage example analysis

This article uses examples to describe MySQL tran...

Native JS to achieve drag photo wall

This article shares with you a draggable photo wa...

Solve the problem of garbled data in MySQL database migration

Under the instructions of my leader, I took over ...

11 ways to remove duplicates from js arrays

In actual work or interviews, we often encounter ...

MySQL 5.7.18 download and installation process detailed instructions

MySql Download 1. Open the official website and f...

MySQL series: redo log, undo log and binlog detailed explanation

Implementation of transactions The redo log ensur...

How to display and format json data on html page

JSON data is displayed and formatted on the HTML ...

How to configure Nginx's anti-hotlinking

Experimental environment • A minimally installed ...

Mysql 5.6.37 winx64 installation dual version mysql notes

If MySQL version 5.0 already exists on the machin...

Windows cannot start MySQL service and reports error 1067 solution

Suddenly when I logged into MySQL, it said that a...

Detailed explanation of the steps to build a Vue project with Vue-cli

First you need to install Vue-cli: npm install -g...

Inspiring Design Examples of Glossy and Shiny Website Design

This collection showcases a number of outstanding ...

Some references about colors in HTML

In HTML, colors are represented in two ways. One i...

react-beautiful-dnd implements component drag and drop function

Table of contents 1. Installation 2.APi 3. react-...