本文介绍如何使用Vue封装一个固钉(Affix)组件，该组件能够根据滚动条位置自动吸附到窗口底部或相对窗口固定。在滚动到底部时，按钮会变为固钉状态，离开底部时恢复原位。通过监听滚动事件和修改CSS类实现这一功能，并提供了调整底部高度的灵活性。
@click="$router.go(-1)">返回
export default {
name: 'Affix',
props: {
},
data () {
return {
}
},
mounted () {
window.addEventListener('scroll', this.handleScroll)
},
methods: {
handleScroll (e) {
if (document.documentElement.scrollHeight - document.documentElement.scrollTop <= document.documentElement.clientHeight + 317) {
let fxDom = document.getElementsByClassName('back-btn-position-fx-style')
if (fxDom.length > 0) {
fxDom[0].classList.add('back-btn-position-ab-style')
fxDom[0].classList.remove('back-btn-position-fx-style')
}
} else {
let adDom = document.getElementsByClassName('back-btn-position-ab-style')
if (adDom.length > 0) {
adDom[0].classList.add('back-btn-position-fx-style')
adDom[0].classList.remove('back-btn-position-ab-style')
}
}
}
}
}
.back-btn-position-ab-style {
position: absolute;
bottom: 20px;
margin-left: 1074px;
}
.back-btn-position-fx-style {
position: fixed;
bottom: 20px;
margin-left: 1074px;
}
封装时我写的这个项目底部高度是317像素，可根据自己业务需求把代码中的317改成相应的底部高度
扫一扫
612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
