多个swiper-item,input键盘上方出现空白,键盘显示错乱原因?
发布于 5 年前 作者 xia31 14196 次浏览 来自 官方Issues
功能:点击“说点什么...”,显示input,并自动聚焦调出键盘
预期表现:正常的应该像第三个图片这样,input被顶起来,键盘在下面
异常表现:第一个item会出现图二这样的大片空白

对比:如果我只保留一个swiper-item,显示就正常,多个swiper-item,第一个item会异常,其余都正常

  <swiper vertical="{{vertical}}"  bindchange="slide" style="height:100vh;">
    <swiper-item item-id="1">

      <image class='background' src="/2.jpg" mode="scaleToFill"></image>
    
      <view class="bottomPos">
        

        <!--隐藏的输入框{{isFocus}} hidden="{{isdisplay}}"-->
        <view class="cu-bar input" wx:if="{{!isdisplay}}">
          <view class="action">
            <text class="cuIcon-write text-grey"></text>
          </view>
          <!--focus改成auto?!-->
          <input class="solid-bottom" focus="auto" value="{{inputMsg}}" maxlength="300" cursor-spacing="10" bindblur="onblurkey" bindinput="inputMsg"></input>
          <button class="cu-btn bg-green shadow-blur" bindtap="sendMsg">发送</button>
        </view>

        <!--底部导航-->
        <view class="padding-left-xs padding-right-xs flex solid-bottom justify-between" wx:if="{{isdisplay}}">
          <button class="bg-touming chatbutton cu-btn round" bindtap="openKey" style="height:96rpx;font-size:35rpx;">
          说点什么...
          </button>

          
          <view class="cu-avatar round bg-green lg" style="display:flex;flex-flow:column;" bindtap="navigateToactivityinfo">
            <text class="cuIcon-group xl text-white"></text>
            <view class="cu-tag badge" style="top:-5rpx;right:-5rpx;">{{member}}P</view>
            <text class="text-white" style="font-size:25rpx;margin-top:-10rpx;">报名</text>
          </view>
          <button class="cu-avatar round lg" style="background-image:url({{login_userInfo.avatarUrl}});" bindtap='getUserProfile'>
            
          </button>
        
        </view>
        
      </view>
 
    </swiper-item>

    <swiper-item item-id="2">

      <image class='background' src="/2.jpg" mode="scaleToFill"></image>
      <!--弹幕格式-->
      
      <view class="bottomPos">
       
        <!--隐藏的输入框{{isFocus}} hidden="{{isdisplay}}"-->
        <view class="cu-bar input" wx:if="{{!isdisplay}}">
          <view class="action">
            <text class="cuIcon-write text-grey"></text>
          </view>
          <!--focus改成auto?!-->
          <input class="solid-bottom" focus="auto" value="{{inputMsg}}" maxlength="300" cursor-spacing="10" bindblur="onblurkey" bindinput="inputMsg"></input>
          <button class="cu-btn bg-green shadow-blur" bindtap="sendMsg">发送</button>
        </view>

        <!--底部导航-->
        <view class="padding-left-xs padding-right-xs flex solid-bottom justify-between" wx:if="{{isdisplay}}">
          <button class="bg-touming chatbutton cu-btn round" bindtap="openKey" style="height:96rpx;font-size:35rpx;">
          说点什么...
          </button>

          
          <view class="cu-avatar round bg-green lg" style="display:flex;flex-flow:column;" bindtap="navigateToactivityinfo">
            <text class="cuIcon-group xl text-white"></text>
            <view class="cu-tag badge" style="top:-5rpx;right:-5rpx;">{{member}}P</view>
            <text class="text-white" style="font-size:25rpx;margin-top:-10rpx;">报名</text>
          </view>
          <button class="cu-avatar round lg" style="background-image:url({{login_userInfo.avatarUrl}});" bindtap='getUserProfile'>
            
          </button>
        
        </view>
        
      </view>

    </swiper-item>    
</swiper>

回到顶部