h5中手机键盘弹起时弹窗高度变化

H5中手机键盘弹起时弹窗高度变化

1、input聚焦获取该弹窗元素，将该弹窗元素高度缩小同时滚动到底部

// inpt聚焦
handleFocus(){
    this.keyboardShow = true;
    const element = document.getElementById('wwwcRegin');
    element.scroll(0, element.scrollHeight );
}

2、template代码部分

<van-popover v-model="wwwcRegionPopover" trigger="click" placement="bottom-start">
          <div class="wwwc-region-wrap" :style="{height: keyboardShow ? '2rem' : '3.6rem'}" id="wwwcRegin">
            <div v-for="(it, ind) in wwwcRegionData"
                 :data-item="it"
                 :style="{ background: currentWwwc === ind ? '#333333' : '#222222'}"
                 :class="['wwwc-item', currentWwwc === ind ? 'active-color' : 'deactive-color']"
                 @click="handleWwwcSelect(it, ind)"
                 :key="it.text">
              <span>{{it.text}}</span>
              <span>WL:{{it.wl}}</span>
              <span>WWW:{{it.www}}</span>
            </div>
            <div class="wwwc-item deactive-color">
              <div style="margin-right: 0.1rem;">自定义</div>
              <div class="wwwc-input">WL:
                <input type="number" class="ipt" @focus="handleFocus" v-model="wlValue">
              </div>
              <div class="wwwc-input">WWW:
                <input type="number" class="ipt" @focus="handleFocus" v-model="wwwValue">
              </div>
              <div class="sure" @click.stop="handleSure">确定</div>
            </div>
          </div>
          <template #reference>
            <div :class="['toolbar-item', item.key === activeBtnKey ? 'active-color' : 'deactive-color']">
              <svg-icon :icon-class="item.iconName" class="svg-wrap" :data-key="item.key"/>
              <div class="title" :data-key="item.key">{{item.title}}</div>
            </div>
          </template>
</van-popover>