<view class="result_container"> <swiper current="{{currentTab}}" duration="300" bindchange="swiperTab" next-margin="150rpx" previous-margin="150rpx" class="swiper_container" bindtouch="test"> <swiper-item style="height:100%"> <view class="item_container {{currentTab!=0?'left':''}} {{currentTab==0? 'item_active':''}}"> <view class="sub_item_container"> <view class="bad_img"> </view> <textarea class="result_box" disabled="true">{{bad}} </textarea> </view> </view> </swiper-item> <swiper-item style="height:100%"> <view class="item_container {{currentTab==1? 'item_active':''}} {{currentTab==0?'right':''}} {{currentTab==2?'left':''}}"> <view class="sub_item_container"> <view class="good_img"> </view> <textarea class="result_box" disabled="true">{{good}} </textarea> </view> </view> </swiper-item> <swiper-item style="height:100%"> <view class="item_container {{currentTab!=2?'right':''}} {{currentTab==2? 'item_active':''}}"> <view class="sub_item_container"> <view class="notbad_img"> </view> <textarea class="result_box" disabled="true">{{not_bad}} </textarea> </view> </view> </swiper-item> </swiper></view> |
.result_container { width: 100%; height: 45%;}.item_container { width: 80%; height: 80%; margin-left: auto; margin-right: auto; display: flex; position: absolute; opacity: 0.7; z-index: 5; top: 10%; background: white; box-shadow: #c7c7c7 0px 0px 10rpx; border-radius: 30rpx;}.item_active { width: 96%; height: 96%; opacity: 1; z-index: 10; top: 2%; left: 2%; transition:all .2s ease-in 0s;}.left { right: -30%;}.right { left: -30%;}.swiper_container { height: 100%;}.bad_img { width: 13%; height: 13%; background-size: 100%; margin-left: auto; margin-right: auto; margin-top: 5%; background-repeat: no-repeat; background-image: url('https://xxx/images/bad.png')}.good_img { width: 13%; height: 13%; background-size: 100%; margin-left: auto; margin-right: auto; margin-top: 5%; background-repeat: no-repeat; background-image: url('https://xxx/images/good.png')}.notbad_img { width: 13%; height: 13%; background-size: 100%; margin-left: auto; margin-right: auto; margin-top: 5%; background-repeat: no-repeat; background-image: url('https://xxx/images/not_bad.png')}.sub_item_container { height: 100%; width: 100%; display: flex; flex-direction: column;} |
在真机上使用的时候，在swiper-item上滑动没有效果。在swiper上可以滑动，但swiper的内容上，swiper-item占据了绝大部分的空间，所以让我很困扰。我应该怎么修改这一块呢？
页面是这个样子的。
=======================================================================
额，找到原因了，是textarea夺走了swiper的滑动事件，但还是不知道怎么改。
可以聚焦展示textarea，失焦用view代替~