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

0 0 小程序 flex textarea
汉有游女,不可求思。
2018-04-08 14:35:04 提问

关注 0关注

收藏 0收藏, 575浏览

微信小程序的页面是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>

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

请先 登录 后评论

0个回答

注册新账号

悬赏追问
10
  • 10
  • 20
  • 50
  • 100
  • 200
  • 输入数值
发布追问