公告列表
公告列表
收藏
回答

小程序中，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：使用bindfocus、bindblur 操作函数来动态设置底部组件框与底部之间的距离（外边距）：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
      赞
      回复
请 登录 后发表内容
相关文档