IOS系统下 swiper 垂直滚动与scroll-view垂直滚动冲突如何解决?
发布于 5 年前 作者 qye 4350 次浏览 来自 问答
如题: swiper-item 下 嵌套 scroll-view 垂直滚动后,ios系统中,出现下拉冲突,请问官方如何解决这个问题,scroll-view内容背景为黑色

<swiper
  class='scroll-swiper'
  circular="{{false}}"
  vertical="{{true}}"
  bindchange="bindChange"
  bindtransition="bindTransition"
  bindanimationfinish="bindAnimationFinish"
  skip-hidden-item-layout="{{true}}"
  duration="{{500}}"
  easing-function="default"
  current="{{swiperCurrent}}"
  previous-margin="{{swiperPreviousMargin}}px"
>
  <swiper-item  class='scroll-swiper-item'>
    <one-item isOn="{{swiperCurrent == 0 ? true : false}}" height="{{WindowsHeight}}"/>
  </swiper-item>
  <swiper-item 
      class='scroll-swiper-item' 
     >
    <scroll-view 
      scroll-y 
      scroll-anchoring="{{true}}"
      bindscroll='bindScroll'
      style="height:{{WindowsHeight-swiperPreviousMargin}}px;background:#000;" 
    >
    <view style="height:1000px;background:#fee200;font-size:40rpx;padding:20px;">
        我们之前也有复现过这个问题 查下来猜测可能的原因是

事件堆积导致bingchange短时间内调用多次,current绑定了页面上的数据,又导致current不断被重设。

又导致bindchange被调用多次,所以swiper显得一直在快速抖动。

不过还是要综合代码去看

大概流程是这样:如果当前页面改变了之后,代码里面setdata改变了current,current绑定到了swiper上,如果current和swiper的当前页相同,这样做是没什么问题的。但是如果bindchange大量堆积,可能时序就会出错。

margin-top 垂直方向塌陷导致的,解决 margin-top 塌陷的方法有:

给父盒子添加border

给父盒子添加padding-top

给父盒子添加overflow:hidden

父盒子:position:fixed

父盒子:display:table

给子元素的前面添加一个兄弟元素

       我们之前也有复现过这个问题 查下来猜测可能的原因是

事件堆积导致bingchange短时间内调用多次,current绑定了页面上的数据,又导致current不断被重设。

又导致bindchange被调用多次,所以swiper显得一直在快速抖动。

不过还是要综合代码去看

      </view>
   
    </scroll-view>
    
  </swiper-item>
</swiper>
回到顶部