vue 楼层滚动 代码
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
header,
footer {
height: 500px;
background: black;
color: aliceblue
}
.lc {
height: 1000px;
}
.a {
background: red;
}
.b {
background: green;
}
.c {
background: blue;
}
.d {
background: aquamarine;
}
.e {
background: blueviolet;
}
.f {
background: chocolate;
}
.tip {
width: 50px;
height: 400px;
position: fixed;
right: 5px;
bottom: 5px;
background: greenyellow;
/* display: none; */
}
.tip>ul {
width: 50px;
height: 50px;
}
.tip>ol {
width: 50px;
height: 300px;
}
.tip li {
width: 50px;
height: 49px;
text-align: center;
line-height: 50px;
border-bottom: 1px solid gray;
cursor: pointer;
}
.tip li:hover {
background: darkcyan;
color: white;
}
.gray {
background-color: darkcyan;
}
</style>
</head>
<body>
<div id='myApp'>
<div :class="n" class="lc" v-for="n,i in lis" :key="i" ref="liss">{{i+1}}</div>
<footer ref="foot">footer</footer>
<div class="tip">
<ul>
<li @click="f3()">Top</li>
</ul>
<ol>
<li v-for="n,i in arr" @click="f1(i)" :class="{gray:i==index}">{{n}}</li>
</ol>
<ul>
<li @click="f2()" :class="index==arr.length?'gray':''">footer</li>
</ul>
</div>
</div>
</body>
<script src='./vue.js'></script>
<script>
new Vue({
el: '#myApp',
data: {
arr: [1, 2, 3, 4, 5, 6],
lis: ["a", "b", "c", "d", "e", "f"],
h: [],
res: {},
scroll: 0,
index: 0
},
methods: {
f1(i) {
this.$refs.liss[i].scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
},
f2() {
this.$refs.foot.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" })
},
f3() {
this.$refs.liss[0].scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
}
,
handleScroll() {
this.scroll = document.documentElement.scrollTop || document.body.scrollTop
this.index = Math.floor(this.scroll / 990)
console.log()
}
},
computed: {
},
created() {
},
mounted() {
window.addEventListener('scroll', this.handleScroll)
},
//销毁,否则跳到别的路由还是会出现
destroyed() {
window.removeEventListener('scroll', this.handleScroll)
}
})
</script>
