您的位置:首页 > 移动开发

移动端fixed定位按钮在底部,键盘弹起,底部按钮顶上去另类解决办法

2017-07-27 17:37 681 查看


解决办法:

换个思路,检测浏览器的resize事件,当高度过小时就可以判定为出现这种情况,这时把定位改成ab或者直接隐藏掉之类的。

方法一

<mt-button v-show="isOriginHei" class="add-client" type="default" size="large" @click.native="submitClientInfo"><icon-svg iconClass="baocun" class="icon-xinzeng"></icon-svg>提交</mt-button>


第一步: 先在 data 中去 定义 一个记录高度是 属性

data: {
screenHeight: document.body.clientHeight// 这里是给到了一个默认值 (这个很重要),
originHeight: document.body.clientHeight//默认高度在watch里拿来做比较
}


第二步: 我们需要 讲 reisze 事件在 vue mounted 的时候 去挂载一下它的方法

mounted () {
const that = this
window.onresize = () => {
r
c026
eturn (() => {
window.screenHeight= document.body.clientHeight
that.screenHeight= window.screenHeight
})()
}
}


第三步: watch 去监听这个 属性值的变化,如果发生变化则讲这个val 传递给 this.screenHeight

watch: {
screenHeight(val) {
this.screenHeight= val
}
}


第四步:watch监控比较,判断按钮是否该显示出来

watch: {
screenHeight (val) {
if(this.originHeight != val) {
this.isOriginHei = false;
}else{
this.isOriginHei = true;
}
}
}


方法二

步骤一:定义一个指令 foot

let listenAction;
let originalHeight;
let currHeight;
export default new Object().install = (Vue, options = {}) => {
Vue.directive('foot', {
insert(el, binding) {
const elStyle = el.style;
let active = false;
originalHeight = document.body.clientHeight;
const reset = () => {
if(!active) {
return ;
}
elStyle.display = 'flex';
active = false;
}
const hang = () => {
if(active) {
return ;
}
elStyle.display = 'none'
active = true;
}
const getCurrHeight = () => {
let getHeight = document.body.clientHeight;
return getHeight;
}
const check = () => {
currHeight = getCurrHeight();
if(currHeight != originalHeight) {
hang();
}else {
reset();
}
}
listenAction = () => {
check()
}
window.addEventListener('resize', listenAction);
},
unbind() {
window.removeEventListener('resize',listenAction);
}
})
}


步骤二:组件引用

import Foot from 'libs/foot'
Vue.use(Foot)


步骤三:指令使用

<m-flex class="pay-group" v-foot>
<m-flex-item class="should-pay">应付金额:<span>¥99</span></m-flex-item>
<m-button @click="goPay" class="pay-btn">去支付</m-button>
</m-flex>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: