uniapp swiper 实现自动轮播不卡顿，匀速滚动效果：速度保持恒定

效果展示 

 <swiper
      :autoplay="true" // 是否自动切换
      interval="3000" //自动切换时间间隔
      duration="3000" //滑动动画时长
      easing-function="linear" // 线性缓动动画类型，切换过程中速度保持恒定，没有加速或减速的效果。
      :circular="true"  //是否采用衔接滑动，即播放到末尾后重新回到开头
      :acceleration="true" // 当开启时，会根据滑动速度，连续滑动多屏
      class="commodity-swiper"
      @change="swiperChangeTow"
    >

因为我们用的是uniapp 内置组件swiper 所以与直接用三方库不同，uniapp 提供了一个属性让滚动平滑：easing-function 

1. default：默认的缓动动画类型，通常是一种渐变的效果。

2. linear：线性缓动动画类型，切换过程中速度保持恒定，没有加速或减速的效果。

3. easeInCubic：三次方缓动动画类型，切换开始时速度较慢，逐渐加快。

4. easeOutCubic：三次方缓动动画类型，切换结束时速度减慢，逐渐减速。

5. easeInOutCubic：三次方缓动动画类型，切换过程中包含加速和减速两个阶段，效果比较平滑。

在uniapp中使用三方库的swiper这样写是无法实现

<swiper :options="swiperOption" ref="mySwiper">
    <swiper-slide style="margin-right: 0px;" v-for="(items,indexs) in listImg" :key="indexs">
            <img :src="items.url" alt="">
    </swiper-slide>
</swiper>

swiperOption: {
    speed: 5000, //匀速时间
    freeMode:true,
    loop: true,
    autoplay: {
        delay:0,
        stopOnLastSlide: false,
        disableOnInteraction: false
    },
    slidesPerView: 3,
    loopFillGroupWithBlank: true,
    normalizeSlideIndex:true
},

::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;
    }