微信小程序 flex布局 如何使弹出的键盘不遮挡输入框

Question

微信小程序的页面是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">发布时间：{{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>

这样评论输入框是在页面底部。但是每次键盘弹出的时候，会遮挡住输入框。请问应该怎么解决这个问题呢？

Answer 1

设置cursor-spacing='20'指定光标与键盘的距离为20px。20为例