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