首页 » PHP教程 » php若何返回vue技巧_Vue实现返回顶部或者回到底部的功能实现

php若何返回vue技巧_Vue实现返回顶部或者回到底部的功能实现

访客 2024-11-23 0

扫一扫用手机浏览

文章目录 [+]

PS:mounted函数下实现监听滚动条参数变革,方便监听scrollToTop是否为0,排查故障,如果一贯为0,须要把稳是否是overflow引起的,如果是该问题,可以overflow:visible;如果不是这个问题,可以看看外层高度是否定义,未定义设置一个100%或者固定值看看,scrollToTop是否会变革。

HTML代码示例部分

php若何返回vue技巧_Vue实现返回顶部或者回到底部的功能实现

<div class="wrap" id="wrap" ref="contentData"></div>

php若何返回vue技巧_Vue实现返回顶部或者回到底部的功能实现
(图片来自网络侵删)

mounted(){

this.$nextTick(function () {

window.addEventListener('scroll', this.scrollToTop, true)

})

},

methods: {

scrollToTop(e) {

var scrollTop2 =document.querySelector(".wrap").scrollTop;//获取特定的divscrollTop值

var scrollTop =document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;//获取body divscrollTop值

},

//返回顶部函数

BackToTop(){

//方法一:

this.$refs.contentData.scrollTop = 0

//方法二:

this.$nextTick(() => {

let div = document.getElementById('wrap')

div.scrollTop =0;

console.log(div.scrollTop);

})

Ps:回到底部方法实现事理:

先获取滚动条的高度,然后scrollTop即是滚动条高度就行;

代码示例:

this.$nextTick(() => {

let clientHeight =document.querySelector(".wrap").scrollHeight;

this.$refs.contentData.scrollTop =clientHeight;//也可以用上文方法二写

})

},

}

相关文章

编程语言与国家,交织的命运与辉煌

在当今信息化时代,编程语言已经成为各国科技创新、经济发展的重要基石。不同的国家拥有自己独特的编程语言,它们在历史长河中不断演变、发...

PHP教程 2024-12-28 阅读0 评论0

维语导航语言在新时代的发展与挑战

随着我国西部大开发战略的深入推进,新疆维吾尔自治区作为我国西部的重要门户,其经济、文化、旅游等方面的发展日益繁荣。维语导航语言作为...

PHP教程 2024-12-28 阅读0 评论0

IT进阶之路,介绍技术专家的成长轨迹

在信息技术日新月异的今天,成为一名技术专家成为了无数IT从业者的梦想。通往技术巅峰的道路并非一帆风顺,需要我们不断学习、积累和实践...

PHP教程 2024-12-28 阅读0 评论0