html页面使用vue 创建导航栏

谁借莪１个温暖的怀抱￠ 2023-02-13 08:50 21阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta http-equiv="X-UA-Compatible" content="ie=edge">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    		<script src="/api/html/applet/sixmouth/vue.min.js"></script>
    		<title>导航栏</title>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    				outline: none;
    				-webkit-user-select: none;
    				-ms-user-select: none;
    				-ms-user-select: none;
    				font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu 
    			}
    
    			.tab {
    				white-space: nowrap;
    				overflow-x: scroll;
    				background: #ff7714;
    				width: 100%;
    			}
    
    			.tabitems {
    				font-size: .4rem;
    				color: #fff;
    				display: inline-block;
    				padding: .4rem;
    				opacity: .7;
    			}
    
    			.activeClass {
    				opacity: 1;
    				position: relative;
    			}
    
    			.showline {
    				position: absolute;
    				bottom: .1rem;
    				left: 25%;
    				width: 50%;
    				background: #fff;
    				height: 3px;
    				border-radius: .5rem;
    			}
    
    		</style>
    	</head>
    	<body>
    		<div id="app">
    			<div class="tab">
    				<div v-for="(item,index) in navlist" :class="[currentKey == index ? 'activeClass' : '', 'tabitems']" :data-index="index"
    				 :data-id="item.id" @click="tabclick(index)">
    					{
       {item}}
    					<div class="showline" v-if="currentKey == index"></div>
    				</div>
    			</div>
    		</div>
    		<script type="text/javascript">
    			var app = new Vue({
    				el: '#app',
    				data: {
    					currentKey: 0,
    					navlist: ["导航栏1", "导航栏2", "导航栏3"]
    				},
    				mounted() {
                        //加载load监听
    					window.addEventListener('load', function() {
    					})
                        //滚动监听
    					window.addEventListener("scroll", this.scrollBottom, true);
    				},
    				methods: {
    					tabclick(index) {
                            //在此判断同一个导航不可重复点击
    						if (index != this.currentKey) {
    							this.currentKey = index;
    						}
    					},
                        scrollBottom(){
                            console.log("我滚动了")
                        }
    			})
    		</script>
    	</body>
    </html>