小程序商城开源最新seo新手教程

在uniapp 中 用户点击input 输入框 整体会上移，导致布局 错乱 或者 部分内容消失。

在uniapp 官网给出了一个属性： adjust-position="true" 默认是true，他的意思是 键盘弹起时，是否自动上推页面，设置为false，拒绝上推页面。

但是设置完还有问题，就是用户点击输入框，看不到自己输入的内容，因为手机的软键盘弹起遮住了input框。需要监听用户点击input框，让他跟随着软键盘的高度发生改变，当弹起软键盘时，让他始终在键盘的上面。

解决方法如下：

动态绑定css 属性 bottom，当input框 聚焦时触发 说明用户调起了软键盘，然后把软键盘的高度复制给 bottom。

上代码

<!-- 发表区 --><view class="comment-input-row" :style="{bottom:bottomVal}"><input :adjust-position="false" class="shuru-kuang_input" type="text" v-model="Ping_text" placeholder="发表评论，让更多人看到你 ~"@focus="focus" @blur="blur" :auto-blur="true"/><view class="fs_pl"><image :src="Ping_text==''?'/static/image/fs.png':'/static/image/fs (2).png'" mode=""></image></view></view>

data() {return {bottomVal:0,//软键盘弹起的高度}
},
methods: {focus(e){//官网上说：e.detail.height 为键盘高度 this.bottomVal = e.detail.height+ "px";},//失去焦点 自动归位blur(){this.bottomVal = 0;}
}

官网原话：

最终效果：