收藏
回答

scroll-view + swiper + input 有严重的bug?

wxml

<view class="root">
  <scroll-view class="scroll" scroll-y type="custom" show-scrollbar="{{false}}">


    <swiper class="swiper" duration="{{400}}" cache-extent="0" worklet:onscrollstart="onTabTransition">
      

      <swiper-item class="swiper-item">

        <input class="input" placeholder="学校名称" />
      </swiper-item>
      <swiper-item class="swiper-item">

        <input id="myInput" class="input" placeholder="专业名称:如国际贸易" />

      </swiper-item>


      <!-- catch:touchmove="return false" -->
      <swiper-item class="swiper-item">

        <input class="input" placeholder="本人姓名" />
        <input class="input" placeholder="性别" />
      </swiper-item>
      <swiper-item class="swiper-item">

        <input class="input" placeholder="头像" />
      </swiper-item>
    </swiper>
    <view class="section">
      <next class="next" bind:tap="onNextClick">下一步</next>
    </view>
  </scroll-view>
</view>

js
Page({


  data: {
    focus: true
  },


  onReady() {


  },


  onNextClick() {
    console.log('hi.......')
  },


  onTabTransition() {
    'worklet'


    console.log("start.....")
    return
  },


})


写了demo,没几行代码, 就遇到这个奇怪的问题,swiper 页里有input 组件,每滑动一页,input输入时,页面都会输入法顶跑,见视频里,越往后顶的越高。

不用scroll-view 就没有问题,组件之间兼容有问题。 现象很好复现, 细节我录了视频,这里发不上来,需要的话,可以找我。
回答关注问题邀请回答
收藏

1 个回答

  • 三毛
    三毛
    03-01

    【图1】

    【图2】

    滑动到第三页开始,点输入,整个页面直接被输入法顶上去了,然后变成了空白,见图2,输入法缩起来,页面也不下来了。 要是滑到swiper的最后一页更夸张,相同操作直接空白页了。

    03-01
    有用
    回复
登录 后发表内容