共计 668 个字符,预计需要花费 2 分钟才能阅读完成。
<div class="buttom" v-show="isShow"> </div>
基本思路是通过监听屏幕的高度来改变底部的显示 / 隐藏
首先:在 data 中获取屏幕的默认以及实时高度 —->
data() {
return {
isShow:true,// 按照标准隐藏
domHeight: document.documentElement.clientHeight, // 默认屏幕高度
showHeight: document.documentElement.clientHeight, // 实时屏幕高度
}
然后实现监听事件(监听高度变换从而改变 isShow 的值)
showHeight() {if (this.domHeight > this.showHeight) {this.hidshow = false;} else {this.hidshow = true;}
}
最后再 mounted(需要注意换取的哪里的高度)移动端建议是可见区域
document.body.clientWidth ==> BODY 对象宽度
document.body.clientHeight ==> BODY 对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
window.onresize = () => {return (() => {this.showHeight = document.documenElement.clientHeight;// 这里需要注意一下可视区高度。})();};
正文完
发表至:无分类
2019-07-31