<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;//这里需要注意一下可视区高度。
})();
};
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。