【微信小程序】底部输入框文本多行输入+iphoneX以上机型底部适配+input/textarea输入框聚焦时不上推页面

版权声明：本文为博主原创文章，未经博主允许不得转载。文章底部留言可联系作者。

一、底部输入框实现多行输入

在做小程序过程中做底部输入框的时候，希望可以实现同微信类似的多行输入。

微信多行输入效果

小程序实现效果如下：

小程序多行输入效果

主要是利用小程序textarea组件的auto-height属性。

<textarea auto-height />

二、iphoneX以上机型底部适配

iphoneX以上机型底部会出现空白，要做适配首先在app.js中判断iphoneX以上机型。

App({
  onLaunch: function () {
    let _self = this;
    wx.getSystemInfo({
        success: res => {
            let modelmes = res.model;
            if (/^iphone\s((x|x[rs])|1[1-9])/.test(modelmes.toLowerCase())) {
                _self.globalData.isIphoneX = true
            }
        }
    })
  },
  globalData: {
    isIphoneX: false, //判断iphoneX以上机型
  }
})

然后在需要进行判断的页面进行操作：

wxml：

<view class="container">
  <view class="{{isIphoneX ? 'fix-iphonex' : ''}}">
    <view>
      <textarea auto-height />
    </view>
    <view>发送</view>
  </view>
  <view class="{{isIphoneX ? 'fix-iphonex-banner' : ''}}"></view>
</view>

wxss:

/* 适配iphoneX */
.fix-iphonex{
  bottom:68rpx!important;
}

// after伪类方式
.fix-iphonex-button::after {
    content: ' ';
    position: fixed;
    left: 0;
    bottom: 0!important;
    height: 68rpx!important;
    width: 100%;
    background: #fff;
}

// 如果after伪类不好使，在对应文件下新增空白view标签，对其设置iphonex兼容样式
.fix-iphonex-banner{
  position: fixed;
  left: 0;
  bottom: 0!important;
  height: 68rpx!important;
  width: 100%;
  background: #fff;
}

js部分

const app = getApp()

Page({
  data: {
    isIphoneX: app.globalData.isIphoneX,
  },
})

效果图： iphonex以上机型底部适配效果

三、输入框获得焦点时不上推页面，但是希望输入框在软键盘上方

效果图如下：输入框在软键盘上方

原理:

adjust-position的值来控制键盘弹起时是否自动上推页面，通过bindfocus来获取键盘高度，使input/textarea输入框聚焦时跟随键盘上移而不被遮挡，输入框失去焦点时触发bindblur事件，输入框恢复原位。

wxml部分：

  <view class="chat-input" style="bottom:{{bottom}}px">
    <view class="chat-text">
      <textarea 
        adjust-position="{{false}}"
        bindfocus="onFocus" 
        bindblur="onBlur"
      />
    </view>
  </view>

wxss部分：

/* 输入框部分 */
.chat-input{
  display: flex;
  box-sizing: border-box;
  position: fixed;
  bottom: 0rpx;
  overflow: hidden;
  font-size: 28rpx;
  padding: 14rpx 20rpx;
  background-color: #fff;
  box-shadow:0rpx 4rpx 12rpx 0rpx rgba(0,0,0,0.2);
  z-index: 1000;
}
.chat-input .chat-text textarea{
  box-sizing: border-box;
  line-height: 30rpx;
  width: 100%;
  background-color: #f0f0f0;
}

js部分：

const app = getApp()

Page({
  data: {
    bottom: 0, // 输入框距离底部距离
  },
  onFocus(e) {
      console.log('onFocus', e.detail.height);
      // 获取焦点时，让iphoneX下的白色底条样式取消
      this.setData({
          bottom: e.detail.height
      })
  },
  onBlur(e) {
      // 丢失焦点时，让iphoneX下的白色底条样式加上
      this.setData({
          bottom: 0
      })
  },
})

四、以上内容代码

小程序代码片段： developers.weixin.qq.com/s/eRmCOIm47…

参考文章：