鍍金池/ 問答/UI  HTML/ 微信小程序 flex布局 如何使彈出的鍵盤不遮擋輸入框

微信小程序 flex布局 如何使彈出的鍵盤不遮擋輸入框

微信小程序的頁面是flex布局,css如下:

page {
    height: 100%;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

wxml如下:

<view class="weui-panel">
    <view class="weui-panel__bd" wx:if="{{ticket.deleted != true}}">
        <view class="weui-media-box weui-media-box_text">
            <view class="weui-media-box__title weui-media-box__title_in-text">{{ticket.title}}</view>
            <view class="weui-media-box__desc">
                <text class="info" decode="{{true}}">
                        {{ticket.departureCity}} {{ticket.isSingleFlight == true ? '&nbsp; ?' : '&nbsp; ?'}}{{ticket.isTurning == true ? '&nbsp; '+ticket.turningCity : ''}} {{ticket.isTurning == true ?   (ticket.isSingleFlight == true ? '&nbsp; ?' : '&nbsp; ?') : ''}} &nbsp;{{ticket.arrivalCity}} &nbsp; &nbsp; &nbsp; {{ticket.departureDate}} 
                        </text>
                <text class="desc" decode="{{true}}">
                        {{ticket.comment == null ? '' : ticket.comment}}
                        </text>
            </view>
            <view class="weui-media-box__info">
                <view class="weui-media-box__info__meta">發(fā)布時間:{{ticket.publishDate}}</view>
                <view class="weui-media-box__info__meta weui-media-box__info__meta_extra" wx:if="{{role == 'admin'}}" bindtap="onEdit">編輯</view>
                <view class="weui-media-box__info__meta weui-media-box__info__meta_extra" wx:if="{{role == 'admin'}}" bindtap="edit" bindtap="onDelete" data-id="{{ticket.id}}">刪除</view>
            </view>
        </view>
    </view>
</view>

<view id="comment" class="comment">
    <view class="weui-cells__title">評論</view>
    <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell">
            <view class="weui-cell__bd">
                <input class="comment-input" bindfocus="inputComment" cursor-spacing='1000' maxlength="10" placeholder="最大輸入長度10" />
            </view>
        </view>
    </view>
</view>

這樣評論輸入框是在頁面底部。但是每次鍵盤彈出的時候,會遮擋住輸入框。請問應該怎么解決這個問題呢?

回答
編輯回答
若相惜

設置cursor-spacing='20'指定光標與鍵盤的距離為20px。20為例

2018年3月6日 15:20