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
Table of contents Preface environment Install Cre...
I encountered this problem when I was making the ...
HTML Input Attributes The value attribute The val...
If you already have some kind of password policy ...
1. Why do we need to divide tables and partitions...
<br />Related articles: innerHTML HTML DOM i...
Setup is used to write combined APIs. The interna...
First way: skip-grant-tables: Very useful mysql s...
This article example shares the specific code of ...
Table of contents 1. Download JDK (take jdk1.8.0 ...
MySQL escape Escape means the original semantics ...
When I was helping someone adjust the code today,...
Table of contents 【Function Background】 [Raw SQL]...
Before installing Tomcat, install the JDK environ...
1. Overview 1.1 Basic concepts: Docker is an open...