收藏
回答

swiper为什么在真机上划不动?

<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的滑动事件,但还是不知道怎么改。

最后一次编辑于  2019-12-10
回答关注问题邀请回答
收藏

1 个回答

  • 心心情
    心心情
    2019-12-10

    可以聚焦展示textarea,失焦用view代替~

    2019-12-10
    赞同
    回复
登录 后发表内容
问题标签