<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>监听scrollTop</title>
<style>
* {
padding: 0;
margin: 0;
}
#app {
100%;
height: 2000px;
background: pink;
overflow: hidden;
}
.link {
display: block;
30px;
height: 30px;
background: skyblue;
border-radius: 50%;
position: fixed;
bottom: 30px;
right: 16px;
}
.aa{
90%;
height: 60px;
background: pink;
display: block;
border: 1px dashed red;
margin: 0 auto;
margin-top: 30px;
line-height: 60px;
text-align: center;
}
</style>
</head>
<body>
<div id="app" @click="getScrolls">
<a class="aa" :href="linke" v-for="item in datas">{{item.name}}</a>
<a class="link" attr="https://www.baidu.com"></a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
linke: 'https://www.baidu.com',
page: 1,
datas:[]
},
methods: {
//点击用于session存储数据
getScrolls() {
var scrTop = document.documentElement.scrollTop || document.body.scrollTop;
sessionStorage.setItem('scroll', scrTop)
},
//在设置document.documentElement.scrollTop 之后就清楚session中的数据
autoScroll(){
let scrollTop = Number(sessionStorage.getItem('scroll'))
document.documentElement.scrollTop = scrollTop
//通过$nextTick方式进行删除
// this.$nextTick(()=>{
// sessionStorage.removeItem('scroll')
// })
sessionStorage.removeItem('scroll') //可直接删除
},
async ajaxdata() {
//接口处理
const {data} = await axios.post('https://bj.qhtest.site/byzz/v1.Injured/injuredData', {type_name: 1,type_state:1})
if(data.Code == 200){
this.datas = data.Data
this.autoScroll()
}
}
},
mounted() { //只要页面一进来就能够执行
this.ajaxdata();
}
})
</script>
</body>
</html>