当移动端使用fixed定位自定义nav栏时,安卓端正常固定在可视窗顶部,但是ios端当有input输入,弹出软键盘时,会将nav顶出可视区,因为在ios上,不是相对于浏览器窗口定位的,而是相对于最近的可滚动区,所以就会导致软键盘弹出时,跟随内容一起滚出去了
解决一
js
//pages.json 配置style
"style": {
//手机软键盘升起不让其将页面头部上推
"app-plus": {
"softinputMode": "adjustResize"
}
},
当我们配置完后会发现,ios端解决了顶出的问题;很棒!但接着新问题又出现了,软键盘弹出时滚动页面,自定义nav栏又跟着跑了(¬︿̫̿¬☆),怎么办呢,我们可以监听页面滚动事件,当页面滚动时就收起软键盘,这样就不会跟着跑啦;
html
<input class="input" v-model="oneTopic.value" :adjust-position="false" @input="onInputValue()" />
js
//监听页面滚动事件
export default {
data() {
isInput: false
},
onPageScroll(res) {
console.log("页面滚动了", res)
if (!this.isInput) {
uni.hideKeyboard() //隐藏软键盘
}
},
methods: {
onInputValue() {
this.isInput = true
}
}
}
你们一定会问,为啥多了个isInput的判断,因为实测发现,当input框被软键盘挡住时,输入会触发页面滚动事件,真是离谱;为了解决这个问题,我们可以监听页面input的输入事件,当输入时,赋值给isInput,这样就能判断是真实页面滚动,还是输入事件;这样一个不完美的解决方案就完成了;
(ps: 截取的关键代码,没测试,有问题大概就是这个解决思路)