vue移动端监听滚动事件实现导航栏上滑隐藏下滑显示功能
场景描述:手机端的顶部导航栏 向上滑动隐藏 向下滑动显示。<script>export default {data(){return{i = 0}},mounted () {window.addEventListener('scroll', this.handleScroll, true);
·
场景描述:手机端的顶部导航栏 向上滑动隐藏 向下滑动显示。
<script>
export default {
data(){
return{
i = 0
}
},
mounted () {
window.addEventListener('scroll', this.handleScroll, true);
// 监听(绑定)滚轮 滚动事件
},
methods:{
handleScroll(){
// 页面滚动距顶部距离
var scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
document.body.scrollTop
var scroll = scrollTop - this.i;
this.i = scrollTop;
if(scroll<0){
console.log('up')
//添加你想要的事件
}else{
//添加你想要的事件
console.log('down')
}
},
}
更多推荐
已为社区贡献1条内容
所有评论(0)