苹果真机swiper嵌套scrollView,swiper滑动时scroll-view绝对定位失效?
发布于 4 年前 作者 wlu 6989 次浏览 来自 问答

苹果真机调试swiper里嵌套scroll-view,在scroll-view图层上添加一个绝对定位元素,当swiper滑动时,绝对定位元素别scroll-view覆盖了

<view>
  <swiper>
    <swiper-item class="swiper">
      <view class="swiper-item-wrapper">
        <view class="swiper-item-pos"></view>
        <scroll-view scroll-y style="height: 500rpx;" >
          <view class="scroll-view-item">1</view>
          <view class="scroll-view-item">2</view>
          <view class="scroll-view-item">3</view>
          <view class="scroll-view-item">4</view>
          <view class="scroll-view-item">6</view>
          <view class="scroll-view-item">7</view>
        </scroll-view>
      </view>
    </swiper-item>
    <swiper-item>
      <view class="swiper-item-wrapper">
        <view class="swiper-item-pos"></view>
        <scroll-view scroll-y style="height: 500rpx;" >
          <view class="scroll-view-item">one</view>
          <view class="scroll-view-item">two</view>
          <view class="scroll-view-item">three</view>
          <view class="scroll-view-item">four</view>
          <view class="scroll-view-item">five</view>
          <view class="scroll-view-item">six</view>
          <view class="scroll-view-item">seven</view>
        </scroll-view>
      </view>
    </swiper-item>
    <swiper-item>
      <view class="swiper-item-wrapper">
        <view class="swiper-item-pos"></view>
          <scroll-view scroll-y style="height: 500rpx;" >
            <view class="scroll-view-item"></view>
            <view class="scroll-view-item"></view>
            <view class="scroll-view-item"></view>
            <view class="scroll-view-item"></view>
            <view class="scroll-view-item"></view>
            <view class="scroll-view-item"></view>
            <view class="scroll-view-item"></view>
          </scroll-view>
        </view>
    </swiper-item>
  </swiper>
</view>

.swiper-item-wrapper {
  position: relative;
  background: yellow;
  border-radius: 30rpx;
}
.swiper-item-pos {
  position: absolute;
  left: 0;
  top: 0;
  height: 150rpx;
  width: 100rpx;
  background-color: red;
  z-index: 999;
}
.scroll-view-item {
  width: 100%;
  height: 100rpx;
  margin-bottom: 10rpx;
  background-color: aquamarine;
}

1 回复

请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

回到顶部