<swiper class="swiper" :style="`height:${Height}px`"> <swiper-item> <swiper class="" :style="`height:${Height}px`" :vertical="true"> <swiper-item catch-touchmove="true" ref="childSwiper" class="item_swiper" :style="`height:${Height}px`" v-for="item in 6" :key="item" > <view class="videoBox" :style="`top:${Height / 2}px`"> <video id="myVideo" style="height: 450rpx" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%[email protected]" ></video> </view> </swiper-item> </swiper> </swiper-item> <swiper-item :style="`height:${Height}px`"> <text style="color: #fff; font-size: 26rpx">足迹足迹</text> </swiper-item> </swiper>

This is a Vue.js code that defines a Swiper component with two Swiper Items. The first Swiper Item contains another Swiper component that is set to be vertical and contains multiple video elements. The second Swiper Item contains a text element.

The Height variable indicates the height of the Swiper component and is used to set the height of the child Swiper and the video elements.

The catch-touchmove attribute on the child Swiper item indicates that touchmove events should be captured and prevented from propagating to the parent Swiper component.

可能是因为外层swiper组件的swiper-item没有设置宽度导致横向滑动失效。可以尝试在swiper-item上添加宽度属性，例如：

<swiper class="swiper" :style="`height:${Height}px`">
  <swiper-item style="width:100%">
    <swiper class="" :style="`height:${Height}px`" :vertical="true">
      ...
    </swiper>
  </swiper-item>

  <swiper-item style="width:100%" :style="`height:${Height}px`">
    <text style="color: #fff; font-size: 26rpx">足迹足迹</text>
  </swiper-item>
</swiper>

在第一个swiper-item中添加width:100%，让它占满整个swiper组件的宽度。

如果添加了宽度后仍然无法横向滑动，可以检查以下几个方面：

1. 检查swiper-item的宽度是否足够容纳swiper中的内容，如果宽度设置不够可能会导致横向滑动失效。

2. 检查swiper-container和swiper-wrapper组件是否按照swiper的要求设置了样式，例如：

<swiper class="swiper" :style="`height:${Height}px`">
  <swiper-item style="width:100%">
    <swiper class="swiper-container" :style="`height:${Height}px`">
      <swiper-item class="swiper-wrapper" v-for="item in 6" :key="item" style="width:100%">
        ...
      </swiper-item>
    </swiper>
  </swiper-item>

  <swiper-item style="width:100%" :style="`height:${Height}px`">
    <text style="color: #fff; font-size: 26rpx">足迹足迹</text>
  </swiper-item>
</swiper>

在swiper-container组件上添加了class="swiper-container"，在swiper-wrapper组件上添加了class="swiper-wrapper"，并且swiper-wrapper组件的宽度设置为100%。

3. 检查swiper组件的配置是否正确，例如：

<swiper class="swiper" :style="`height:${Height}px`" :options="swiperOptions">
  ...
</swiper>

export default {
  data() {
    return {
      Height: 0,
      swiperOptions: {
        direction: 'horizontal',
        slidesPerView: 'auto',
        spaceBetween: 10,
        ...
      }
    }
  }
}

在data中添加了swiperOptions，配置了swiper的一些参数，例如direction设置为horizontal表示横向滑动，slidesPerView设置为auto表示自动根据内容设置滑块数量，spaceBetween设置为10表示滑块之间的间距为10px。

出现这种情况可能有以下几个原因：

1. 父级swiper组件的catch-touchmove属性设置为true，阻止了子级swiper组件的touchmove事件，导致横向滑动失效。解决方案：移除父级swiper组件的catch-touchmove属性或者在子级swiper组件上设置stop-propagation属性。

2. 子级swiper组件的样式设置不正确，导致横向滑动失效。解决方案：检查子级swiper组件的样式，确保宽度、高度、position等属性设置正确。

3. 父级swiper组件的direction属性设置为vertical，导致子级swiper组件也变成了纵向滑动。解决方案：将子级swiper组件的direction属性设置为horizontal。

4. 子级swiper组件的slidesPerView属性设置为auto或者大于1，导致子级swiper组件的滑块宽度超过了父级swiper的宽度，导致横向滑动失效。解决方案：将子级swiper组件的slidesPerView属性设置为1，并且在每个滑块中设置宽度，保证不超过父级swiper的宽度。

5. 子级swiper组件中的滑块内容太多，导致横向滑动失效。解决方案：将滑块内容进行优化，避免内容过多导致横向滑动失效。

6. 子级swiper组件的touchmove事件被其他组件拦截。解决方案：检查其他组件是否拦截了子级swiper组件的touchmove事件，如果有，可以在拦截组件上添加stop-propagation属性。

以上是一些可能导致横向swiper失效的原因和解决方案，可以根据具体情况进行排查。

这种情况通常是因为父级swiper组件的catch-touchmove属性设置为true，阻止了子级swiper组件的touchmove事件，导致横向滑动失效。

解决方案有两种：

1. 移除父级swiper组件的catch-touchmove属性。这种方式可能会导致父级swiper组件的滑动体验不佳，适用于子级swiper组件的touchmove事件不会与其他组件冲突的情况。

2. 在子级swiper组件上添加stop-propagation属性。这种方式可以避免父级swiper组件的catch-touchmove属性阻止touchmove事件，但是可能会导致子级swiper组件的touchmove事件与其他组件冲突，需要根据具体情况进行调整。例如：

<swiper class="parent-swiper" catch-touchmove="true">
  <swiper-item>
    <swiper class="child-swiper" vertical :options="swiperOptions">
      <swiper-item v-for="(item, index) in list" :key="index">
        <view class="item">{{ item }}</view>
      </swiper-item>
    </swiper>
  </swiper-item>
</swiper>

export default {
  data() {
    return {
      list: ['item1', 'item2', 'item3', 'item4', 'item5', 'item6'],
      swiperOptions: {
        direction: 'horizontal',
        slidesPerView: 'auto',
        spaceBetween: 10,
        ...
      }
    }
  }
}

在子级swiper组件上添加stop-propagation属性：

<swiper class="child-swiper" vertical :options="swiperOptions" stop-propagation>
  ...
</swiper>

这样可以避免父级swiper组件的catch-touchmove属性阻止touchmove事件，保证子级swiper组件的横向滑动正常。

Usage limit reached 🤕
Each user can chat for free 10 times a day
Please [Upgrade to PRO] to expand the limit