收藏
回答

类似客服,输入框组件,把输入框推到输入键盘顶部效果怎么写样式?

类似客服,输入框组件,把输入框推到输入键盘顶部效果怎么写样式

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

2 个回答

  • 11110111001011110111001110111
    11110111001011110111001110111
    2020-06-30
    // js
    Page({
      data: {
        inputBottom: 0
      },
      onLoad: function () {},
      onReady() {
        // 监听键盘高度变化
        wx.onKeyboardHeightChange(res => {
          console.log(res.height)
          this.setData({
            inputBottom: res.height
          })
        })
      }
    })
    
    // wxml
    
    <view class="input-area" style="bottom:{{inputBottom}}px">
      <input class="input" adjust-position="{{false}}" />
      <view class="btn-send">发送</view>
    </view>
    
    // wxss
    view {
      box-sizing: border-box;
    }
    
    
    .input-area {
      position: fixed;
      bottom0;
      left0;
      display: flex;
      align-items: center;
      height100rpx;
      box-shadow0 0 2rpx rgba(0000.25);
      width750rpx;
      padding0 20rpx;
      transition: all 0.35s;
    }
    
    
    .input {
      border1px solid #7508DD;
      height70rpx;
      border-radius10rpx;
      flex1;
    }
    
    
    .btn-send{
      width120rpx;
      height70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size28rpx;
      color#fff;
      background:linear-gradient(165deg,rgba(255,49,37,10%,rgba(117,8,221,1100%);
      border-radius10rpx;
      margin-left20rpx;
    }
    
    
    
    https://developers.weixin.qq.com/s/P0qJEumW7Hia
    
    2020-06-30
    有用 1
    回复 1
    • 同步
      同步
      2020-06-30
      好的,谢谢
      2020-06-30
      回复
  • KimDot
    KimDot
    2020-06-30

    可以在输入框获取焦点的时候拿到键盘弹出的高度,再给输入框定位距离底部的距离是输入法的高度就可以了

    2020-06-30
    有用
    回复 1
    • 同步
      同步
      2020-06-30
      好的,谢谢
      2020-06-30
      回复
登录 后发表内容
问题标签