vue2+swiper实现轮播滚动,一直显示4个轮播项,一次只滚动一个轮播项

先看最终效果:

轮播滚动

同时还有一些功能:鼠标移动到轮播部分停止滚动,鼠标移开之后继续滚动,点击其中一个的查看详情,也要停止滚动,关闭弹框之后开启滚动。由于我这个项目中需要定时更新数据,所以还需要收到新数据时清理掉原来的数据,显示新数据.

上代码:

 <div class="swiper-container" ref="mySwipers">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="item in todayRecords_list" :key="item.id" style="height:25%">
                <li style="height:100%">
                  <div class="img-box">
                    <img :src="item.alarmPic" width="90%" height="90%" style="margin:5% auto" alt="">
                  </div>
                  <div class="warn-detail">
                    <div>
                      <div>
                        <div class="warn-detail-title">{{ item.alarmCategory }}</div>
                        <span>{{ item.warningTime }}</span>
                        <i>{{ item.areaName }}</i>
                      </div>
                      <span class="detail-btn" @click="showDialog(item.id)">详情>></span>
                    </div>
                  </div>
                </li>
              </div>
            </div>
          </div>

 mounted() {
    // 创建Swiper实例
    this.mySwiper = new Swiper(this.$refs.mySwipers, {
      // 配置选项
      slidesPerView: 4,
      spaceBetween: 10,//轮播项之间的间距
      direction: 'vertical', // 垂直方向滚动（'vertical'）
      autoplay: { //自动开始
        delay: 3000, //时间间隔
        disableOnInteraction: false, //*手动操作轮播图后不会暂停*
      },
    });
  },

    showDialog(id) {//点击"详情"停止滚动
      if (this.$refs.screendialogdetail) {
        this.$refs.screendialogdetail.changeDialog(true)
      }
      this.todayDetailData = this.todayRecords_list &&this.todayRecords_list.filter(item => item.id === id);
      //让滚动停止
      this.mouseEnter();
      this.mouseLeave = () => { }//这一行也很重要,显示弹框时鼠标放在弹框上会触发鼠标移出事件,
       //导致轮播不会停止,所以加上这行代码
    },
    mouseEnter() {//鼠标移入停止滚动
      this.mySwiper.autoplay.stop();
    },
    mouseLeave() {//鼠标移出开始滚动
      this.mySwiper.autoplay.start();
    },
    closeDialogParent() {//关闭弹框开始滚动
      this.mySwiper.autoplay.start();
      this.mouseLeave = () => {//这一行重新给鼠标移出事件写内容,道理同上面置空
        this.mySwiper.autoplay.start();
      }
    },

//这个是我项目中接收到后端推送的新的数据,替换掉原来的数据,
//先销毁掉swiper再重新渲染,原来直接替换数据编写的代码,新数据只显示一轮,
//当前这4条轮播结束之后,数据还是旧的,具体原因还不清楚,
//欢迎小伙伴分享更好的渲染新数据方法
updateSwiper(newData) {
      // 销毁旧的Swiper实例
      this.mySwiper.destroy(true);
      // 更新数据源
      this.testb = newData;
      // 下一帧重新挂载Swiper实例
      this.$nextTick(() => {
        this.mySwiper = new Swiper(this.$refs.mySwipers, {
          // 配置选项
          slidesPerView: 4,
          spaceBetween: 10,
          direction: 'vertical', // 垂直滚动（'vertical'）
          loop: this.todayRecords_list && this.todayRecords_list.length >= 5 ? true : false,
          autoplay: { //自动开始
            delay: 3000, //时间间隔
            disableOnInteraction: false, //*手动操作轮播图后不会暂停*
          },
        });
      })
    }