微信小程序 - - - input和键盘一起上弹如何实现?

效果展示:

---

---

方案一: 获取键盘高度 + 设置fixed属性 + 动态bottom

该方式需要通过调用对应API获取键盘高度，通过js动态设置fixed的bottom属性支实现

1. 布局调整

inputBottom即为input需要移动的距离

  <view class="comment_container" style="bottom:{{inputBottom}}px">
      <input type="text" value="{{value}}" placeholder="喜欢这个宝贝就聊聊吧～"  confirm-type='send' bindfocus='focusComment' bindblur='blurComment' adjust-position='{{false}}' />
  view>
1
2
3

关于获取键盘高度的api，微信提供了好几个，可根据自己的实际情况进行修改，具体可查看:Input

• bindkeyboardheightchange
• bindfocus

2. 对应方法

// 失焦事件
blurComment(e) {
  this.setData({
  	inputBottom: 0
  })
},

// 聚焦事件
focusComment(e) {
    const _this = this;
    
    // height 为获取到的键盘的高度
    const {
      height,
    } = e.detail
    
    wx.getSystemInfo({
      success: function (res) {
      
         _this.setData({
            inputBottom: height,
            keyboardHeight: height,
            // keyboardHeight为存储的键盘高度，后续如果不想再获取键盘高度可使用该值
         })
         
        // 如果发现ios和安卓不满意，可自行配置需要逻辑
        if (res.platform == 'ios') { 
          // ios逻辑
        }else{
          // android逻辑
        }
      }
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

---

---

方案二: adjust-position && cursor-spacing 联合使用

该方式仅需设置adjust-position && cursor-spacing两个属性即可实现

实现代码

<input type="text" value="{{value}}" placeholder="喜欢这个宝贝就聊聊吧~"  confirm-type='send' adjust-position='{{true}}' cursor-spacing='20' />
1