国产亚洲精品资源在线26u

      
      
      <th id="ljgpb"><pre id="ljgpb"><sup id="ljgpb"></sup></pre></th>

      <rp id="ljgpb"></rp>

      您現在的位置: 微信小程序 > 微信小程序運營 > 經驗 >

      小程序input的一些坑點

      來源:微信小程序 編輯:Yiyongtong.com 發布時間:2020-05-18 10:48熱度:

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

      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;`
                  })
              }
          }
      })

      国产亚洲精品资源在线26u

          
          
          <th id="ljgpb"><pre id="ljgpb"><sup id="ljgpb"></sup></pre></th>

          <rp id="ljgpb"></rp>