收藏
回答

小程序中,fixed在底部的view,在弹出输入法键盘后如何保持可见?

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 需求 view 客户端 7.0.0 1.0.0

- 需求的场景描述(希望解决的问题)

fixed在bottom的view,页面中有textarea,当焦点到textarea上面时,弹出输入法后,bottom的view会被输入法挡住

.bar {
  position: fixed;
  width: 100%;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 5rpx 10rpx 5rpx 10rpx;
  color: #555;
  background-color: ghostwhite;
  z-index: -1;
}


- 希望提供的能力

如何设置bottom的view,在弹出输入法时仍然保持在底部?


回答关注问题邀请回答
收藏

2 个回答

  • larva
    larva
    2019-07-29

    你好。请问有解决方案了吗。谢谢

    2019-07-29
    有用
    回复 2
    • 郑洪智
      郑洪智
      2020-02-20
      可以通过一个API计算键盘的高度:wx.onKeyboardHeightChange
      2020-02-20
      回复
    • 谦
      2020-12-18回复郑洪智
      webview里面吊起输入法的时候,有时候会遮挡底部webview区域,这个有遇到过吗?上面这个api不能在webview里使用
      2020-12-18
      回复
  • 微盟
    微盟
    2019-01-29

    1:可以设置cursor-spacing 的属性距离

    2:使用bindfocusbindblur 操作函数来动态设置底部组件框与底部之间的距离(外边距):margin-bottom:30rpx;

    js data里面设置一个变量:inputMarBot: false, //评论框聚焦时,让评论框距离底部的距离为30rpx

    wxml 页面:使用三元表示设置style input组件的父元素容器与底部外边距:<view class='' style="{{inputMarBot?'margin-bottom:50rpx':''}}">(关键,主要跟input的聚焦和是去焦点有关)及input组件定义属性:bindfocus='settingMbShow' bindblur='settingMbNoShow'


    2019-01-29
    有用
    回复 1
    • 郑洪智
      郑洪智
      2019-03-03

      兄弟,fixed底部的view中并没有input,只有两个按钮

      2019-03-03
      回复
登录 后发表内容