vue
<!--1.先在 data 中去 定义 一个记录高度是 属性-->
data () {
return {
docmHeight: document.documentElement.clientHeight,
showHeight: document.documentElement.clientHeight,
footer:true
};
},
<!--2.我们需要将 reisze 事件在 vue mounted 的时候 去挂载一下它的方法-->
activated() {
window.onresize = ()=>{
return(()=>{
this.showHeight = document.body.clientHeight;
})()
}
},
<!--3.watch比较,判断tab是否该显示出来-->
showHeight() {
if(this.docmHeight > this.showHeight){
this.footer=false;
<!--以下是为了兼容样式、没有需要就不用写了-->
this.$refs.scollElement.classList.add('page-tab-container_on');
this.$refs.marto.classList.add('marto_on');
var add = document.querySelectorAll('.web_kit');
add.forEach((v,i)=>{
v.classList.add('web_kiton');
})
}else{
this.footer=true;
<!--以下是为了兼容样式、没有需要就不用写了-->
this.$refs.scollElement.classList.remove('page-tab-container_on');
this.$refs.marto.classList.remove('marto_on');
var bdd = document.querySelectorAll('.web_kit');
bdd.forEach((v,i)=>{
v.classList.remove('web_kiton');
})
}
}
<!--4.最后再mounted/activated(需要注意换取的哪里的高度)移动端建议是可见区域-->
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
uniapp
<input type="text" :adjust-position="false"/>
小程序
- 都可以在input获取焦点的时候隐藏页面底部固定定位的元素,失去焦点显示。