Swiper匀速滚动,Swiper双向控制，Swiper控制多个

Swiper匀速滚动，主要使用的是 delay这属性，设置10ms左右时，就会实现

 属性设置：
 

speed:2500,//匀速时间
autoplay: {
    delay: 0,
    stopOnLastSlide: false,
    disableOnInteraction: true,
}

样式需要添加：

.swiper-container .swiper-wrapper{
    -webkit-transition-timing-function: linear; /*之前是ease-out*/
    -moz-transition-timing-function: linear;
    -ms-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
}

具体代码：

<template>
//触摸结束执行swiper.slideNext()方法，这样可以继续滚动
 <div class="list-mian" @touchend="$refs.mySwiper.swiper.slideNext()">
    <swiper class="swiper-list" ref="mySwiper" :options="swiperOptions">
      <swiper-slide class="list-item" v-for="item in 10" :key="item" :data-index="item">
            <div class="goods-main"></div>
      </swiper-slide>
    </swiper>
</div>
</template>
<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default {
 components: {
        swiper,
        swiperSlide
    },
    data(){
      const _this=this
      retutn{    
            swiperOptions: {
                spaceBetween: 0, //设置slid swiper间的间距
                slidesPerView: 4.1, //可视个数
                loop: true, //设置循环
                loopPreventsSlide: true, // 当swiper 正在过渡时，阻止slide 前进后退的切换操作
                loopAdditionalSlides: 3, //必须设置可视slide有3个，loopedSlides可设为5个或以上
                //设置匀速
                speed: 2500, //轮播动画的时间，值越大，速度越慢
                freeMode: true, //想要匀速运动的时候最好设置上
                autoplay: false,
                on: {
                    //内部元素的点击方法
                    click: function(e,e1) {
                           let index=-1
                            try {
                                index=e.target.getAttribute('data-index')
                            } catch (error) {
                                index=e1.target.getAttribute('data-index')
                            }
                            //执行方法

                    }
                }
            }
        }
    },
   created() {
     let tro=true
     //动态设置启动
     if(tro){
         this.swiperOptions.autoplay = {
          //自动轮播
          delay: 0, // 自动切换的时间间隔
          stopOnLastSlide: false, // 当切换到最后一个slide时停止自动切换
          disableOnInteraction: false // 用户操作swiper之后，是否停止自动切换效果
        }
      }else{
          this.swiperOptions.loop=false
          this.swiperOptions.speed=1
      }
    },
}
</script>
<style lang="scss" scoped>
::v-deep .swiper-container-free-mode>.swiper-wrapper {
  -webkit-transition-timing-function: linear; /*之前是ease-out*/
  -moz-transition-timing-function: linear;
  -ms-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
  margin: 0 auto;
}
.list-mian {
    width: 100%;
    height: 100%;
    .list-item {
      display: flex;
      align-items: center;
      .goods-main {
        width: 44px;
        height: 44px;
        background-color: #ffffff;
        border-radius: 2px;
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
  }
</style>

controller

设置双向控制的参数，或者true使用默认设置
还需要设置control为swiper实例，控制该swiper，而不是被该swiper控制

启用版本：

4.0.0

<script> 
var Swiper1 = new Swiper('#swiper1');
var Swiper2 = new Swiper('#swiper2',{
  controller: {
    control: Swiper1, //控制Swiper1
  },
})

Swiper1.controller.control = Swiper2;//Swiper1控制Swiper2，需要在Swiper2初始化后
Swiper2.controller.control = Swiper1;//Swiper2控制Swiper1，需要在Swiper1初始化后

//控制多个
var Swiper3 = new Swiper('#swiper3',{
  controller:{
    control: [Swiper1, Swiper2],//控制Swiper1和Swiper2
  },
})

Swiper3.controller.control = [Swiper1, Swiper2]//控制Swiper1和Swiper2，和上面效果一样
</script>

 具体方法：
swiper->control