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:
|
<<: How to upgrade CentOS7 to CentOS8 (detailed steps)
>>: MySQL view introduction and basic operation tutorial
This article uses examples to describe MySQL tran...
When multiple images are introduced into a page, ...
This article shares with you a draggable photo wa...
Under the instructions of my leader, I took over ...
In actual work or interviews, we often encounter ...
MySql Download 1. Open the official website and f...
Implementation of transactions The redo log ensur...
JSON data is displayed and formatted on the HTML ...
Experimental environment • A minimally installed ...
If MySQL version 5.0 already exists on the machin...
Suddenly when I logged into MySQL, it said that a...
First you need to install Vue-cli: npm install -g...
This collection showcases a number of outstanding ...
In HTML, colors are represented in two ways. One i...
Table of contents 1. Installation 2.APi 3. react-...