最近在開發中遇到的一些坑點

1. 表單組件(input)如何阻止冒泡
2. 在容器(fixed)中的input如何彈出鍵盤

阻止input冒泡

<view bind:tap="onTap" class="container">
    <input bindinput="onBindInput" type="text"/>
</view>
復制代碼

上例中input操作會冒泡到container，導致onTap響應執行

修正

<view bind:tap="onTap" class="container">
    <input bindinput="onBindInput" type="text" catch:tap="empty"/>
</view>
復制代碼

冒泡的問題是由input的tap事件導致，因此定義一個empty的空方法，使它響應input的catch:tap，來達到阻止input的冒泡的作用

在容器(fixed)中的input如何彈出鍵盤

<view class="container" style="position: fixed; bottom: 0">
    <input bindinput="onBindInput" type="text"/>
</view>
復制代碼

container組件在屏幕底部出現，點擊Input組件時，彈出的鍵盤會遮蓋input輸入框

修正

<view class="container" style="position: fixed; bottom: 0; {{mystyle}}">
    <input bindinput="onBindInput" bindkeyboardheightchange="onkeybord" type="text"/>
</view>
復制代碼

Page({
    data: {
        mystyle: '',
    },
    
    onkeybord(e){
        let detail = e.detail
        let kbHeight = detail.height
        let tool = Pager.getElementsById('reminder-tool')
        if (kbHeight === 0) {
          this.setData({
              mystyle: ' '
          })
        }

        if (kbHeight && kbHeight > 0) {
            this.setData({
                mystyle: `bottom: ${kbHeight-40}px;`
            })
        }
    }
})