移动端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; } } }
方法二
步骤一:定义一个指令 footlet 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>
相关文章推荐
- 底部定位,键盘弹出时把底部顶上去的解决方法
- android 弹起键盘把ui顶上去的解决办法
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
- 移动端fixed定位在底部的按钮
- 软键盘把界面底部的按钮顶到上面的解决办法
- 【Android基础】Android开发键盘把底部导航顶上去了解决办法
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
- fixed定位元素被安卓、ios键盘顶起的解决办法
- 使用flex布局解决安卓手机上固定在底部的按钮,在键盘弹起后挡住input输入框的问题
- 解决html页面中含有input输入框fixed布局底部按钮在Android和ios中被弹起的问题
- 移动端固定输入框在底部会被键盘遮挡的解决方法(必看篇)
- 利用媒体查询解决固定定位按钮被呼出键盘影响的问题
- 移动端 关于 键盘将input 框 顶上去的解决思路
- 输入框弹出的键盘把底部的TabHost顶上去解决
- Android 虚拟键盘弹出把底部栏顶上去的解决办法
- ios移动端部分手机不支持background-attachment: fixed 的解决办法
- android 虚拟键盘弹出把底部栏顶上去的解决办法
- 移动端 关于 键盘将input 框 顶上去的解决思路---个人见解
- android点击输入法会把底部顶上去的解决办法