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

1 篇文章 0 订阅

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值