vue中swiper的嵌套使用

本文想实现wap页面可以上下滑动，并且个别的轮播图可以有横向的自动轮播，下面将展示嵌套的两个轮播图

template页面

            <div class="commend-item">
              <div
                class="swiper-container"
                id="swiperIm1"
              >
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide"
                    v-for="(item,index) in commendList"
                    :key="index"
                  >
                    <div class="imgbox"><img
                        :src="item.normalColumnData.imagePath"
                        alt=""
                      ></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="commend-item">
              <div
                class="swiper-container"
                dir="rtl"
                id="swiperIm2"
              >
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide"
                    v-for="(item,index) in commendList"
                    :key="`swiperIm2${index}` "
                  >
                    <div class="imgbox"><img
                        :src="item.normalColumnData.imagePath"
                        alt=""
                      ></div>
                  </div>
                </div>
              </div>
            </div>

第二个轮播加上 dir="rtl"，可以反向轮播

script内容

   init(value) {
      let tempData = JSON.parse(JSON.stringify(value))
      const imageLength = tempData.length - 1
      //全局设置
      this.swiper1 = new Swiper('#swiper', {
        noSwipingClass: 'slide-auto',
        direction: 'vertical',
        observer: true,
        hashnav: true,
        hashnavWatchState: true,
        mousewheelControl: true,
        nextButton: ".page-next",
      })
      //第一个轮播页面
      this.swiper2 = new Swiper('#swiperIm1', {
        autoplay: 30,
        speed: 3000,
        autoplayDisableOnInteraction: false,
        observer: true,
        observeParents: true,
        loop: true,
        slidesPerView: 'auto',
        loopedSlides: imageLength,
      })
     //第二个轮播页面
      this.swiper3 = new Swiper('#swiperIm2', {
        autoplay: 30,
        speed: 3000,
        autoplayDisableOnInteraction: false,
        observer: true,
        observeParents: true,
        loop: true,
        slidesPerView: 'auto',
        loopedSlides: imageLength,
      })
    },

css页面（最重要！！！）

.swiper-container .swiper-wrapper {
  transition-timing-function: linear;
}

注意loop模式下不要使用free模式，否则会产生轮播异常，详见：

swiper官网