最近在開(kāi)發(fā)中遇到的一些坑點(diǎn)

1. 表單組件(input)如何阻止冒泡

2. 在容器(fixed)中的input如何彈出鍵盤(pán)

阻止input冒泡

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

上例中input操作會(huì)冒泡到container，導(dǎo)致

• onTap

修正

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

冒泡的問(wèn)題是由input的tap事件導(dǎo)致，因此定義一個(gè)empty的空方法，使它響應(yīng)input的catch:tap，來(lái)達(dá)到阻止input的冒泡的作用

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

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

container組件在屏幕底部出現(xiàn)，點(diǎn)擊Input組件時(shí)，彈出的鍵盤(pán)會(huì)遮蓋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.detaillet kbHeight = detail.heightlet tool = Pager.getElementsById('reminder-tool')if (kbHeight === 0) {this.setData({mystyle: ' ' })}if (kbHeight && kbHeight > 0) {this.setData({mystyle: `bottom: ${kbHeight-40}px;` })}}})