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>

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