vue-awesome-swiper使用

最新推荐文章于 2024-03-19 09:53:10 发布

panfuyong11

最新推荐文章于 2024-03-19 09:53:10 发布

阅读量556

点赞数

分类专栏： VUE

原文链接：https://blog.csdn.net/dwb123456123456/article/details/82701740

版权

VUE 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

插件地址：
https://surmon-china.github.io/vue-awesome-swiper/

<template>
    <div class="carousel-swiper">
      <!-- swiper -->
      <swiper :options="swiperOption" v-if="showSwiper" ref="mySwiper">
        <swiper-slide v-for="(item, index) in swiperList" :key="item.index">
            <div class="demo-carousel">
                <!-- <img class="swiper-img" :src="item.img" @click="handleRouterTo(item.url)"/> -->
                <img class="swiper-img" :src="item.img" :data-url="item.url"/>
            </div>
        </swiper-slide>
        <!-- <div class="swiper-pagination" slot="pagination"></div> -->
      </swiper>
    </div>
</template>

<script>
  export default {
    name: "CarouselSwiper",
    props: ['swiperList'],
    data() {
      var self = this;
      return {
        swiperOption: {
            loop: true,
            autoplay: {
        　　　　delay: 2000,
        　　    disableOnInteraction: false,
                autoplayDisableOnInteraction: false,
        　　},
            speed: 1000,
            observer:true,//修改swiper自己或子元素时，自动初始化swiper 
　　        observeParents:true,//修改swiper的父元素时，自动初始化swiper 
            effect: "coverflow",
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: "auto",
            coverflowEffect: {
                rotate: 0,
                stretch: -120, // slide左右距离
                depth: 800, // slide前后距离
                modifier: 0.5, //
                slideShadows: false // 滑块遮罩层
            },
            pagination: {
                el: ".swiper-pagination",
                type: "bullets"
            },
            on:{
                click: function(e){
                let url = e.target.dataset.url
                self.handleRouterTo(url)
                }           
            }
        }
      }      
    },
    beforeRouteEnter(to, from, next) {
    },
    activated(){
        if(this.$refs.mySwiper){
            var swiper = this.$refs.mySwiper.swiper;
            var activeIndex = swiper.activeIndex;
            swiper.slideTo(activeIndex + 1, 1000, false);
        }        
    },
    mounted(){
    },
    methods: {
        handleRouterTo(url){
            this.$router.push({ 
                path: '/details', 
                query: {
                    webUrl: url
                }
            });
        }
    },
    computed: {
        showSwiper () {
            return this.swiperList.length
        }
    }
  }
</script>

<style lang="scss" scoped="" type="text/css">
.carousel-swiper{
    width: 100%;
    padding: 5px 0;
    background-color: #fff;
    // height: 200px;
    .swiper-img{
        width: 100%;
        height: 102px;
        -moz-border-radius: 10px; /* Firefox */
        -webkit-border-radius: 10px; /* Safari 和 Chrome */
        border-radius: 10px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
    }
    .swiper-slide{
        filter:alpha(opacity=80); /* IE */
        -moz-opacity:0.6; /* 老版Mozilla */
        -khtml-opacity:0.6; /* 老版Safari */
        opacity: 0.6; /* 支持opacity的浏览器*/
    }
    .swiper-slide-active{
        filter:alpha(opacity=100); /* IE */
        -moz-opacity: 1; /* 老版Mozilla */
        -khtml-opacity: 0; /* 老版Safari */
        opacity: 1; /* 支持opacity的浏览器*/
    }
}
  .swiper-inner {
    width: 80%;
    height: 102px;
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 270px;
    height: 102px;
  }
</style>

使用vue-awesome-swiper滑块插件

github地址： https://github.com/surmon-china/vue-awesome-swiper.git

1、进入项目目录，安装swiper

npm install vue-awesome-swiper --save

2、引入资源

//vue滑块
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

3.编辑组件

<template>
<swiper :options="swiperOption" ref="mySwiper">
 <!-- slides -->
 <swiper-slide>I'm Slide 1</swiper-slide>
 <swiper-slide>I'm Slide 2</swiper-slide>
 <swiper-slide>I'm Slide 3</swiper-slide>
 <swiper-slide>I'm Slide 4</swiper-slide>
 <swiper-slide>I'm Slide 5</swiper-slide>
 <swiper-slide>I'm Slide 6</swiper-slide>
 <swiper-slide>I'm Slide 7</swiper-slide>
 <!-- Optional controls -->
 <div class="swiper-pagination"  slot="pagination"></div>
 <div class="swiper-button-prev" slot="button-prev"></div>
 <div class="swiper-button-next" slot="button-next"></div>
 <div class="swiper-scrollbar"   slot="scrollbar"></div>
</swiper>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'carrousel',
 data() {
   return {
     swiperOption: {
       // NotNextTick is a component's own property, and if notNextTick is set to true, the component will not instantiate the swiper through NextTick, which means you can get the swiper object the first time (if you need to use the get swiper object to do what Things, then this property must be true)
       // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
       notNextTick: true,
       // swiper configs 所有的配置同swiper官方api配置
       autoplay: 3000,
       // direction : 'vertical',
       effect:"coverflow",
       grabCursor : true,
       setWrapperSize :true,
       // autoHeight: true,
       // paginationType:"bullets",
       pagination : '.swiper-pagination',
       paginationClickable :true,
       prevButton:'.swiper-button-prev',
       nextButton:'.swiper-button-next',
       // scrollbar:'.swiper-scrollbar',
       mousewheelControl : true,
       observeParents:true,
       // if you need use plugins in the swiper, you can config in here like this
       // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
       // debugger: true,
       // swiper callbacks
       // swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
       // onTransitionStart(swiper){
       //   console.log(swiper)
       // },
       // more Swiper configs and callbacks...
       // ...
     }
   }
 },components: {
 swiper,
 swiperSlide
},
 // you can find current swiper instance object like this, while the notNextTick property value must be true
 // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
 computed: {
   swiper() {
     return this.$refs.mySwiper.swiper
   }
 },
 mounted() {
   // you can use current swiper instance object to do something(swiper methods)
   // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
   // console.log('this is current swiper instance object', this.swiper)
   // this.swiper.slideTo(3, 1000, false)
 }
}
</script>

4、根据官方api进行调整

http://www.swiper.com.cn/api/pagination/2016/0126/299.html

5.参数说明： https://blog.csdn.net/dwb123456123456/article/details/82701740

个别属性声明：

autoplay: {

delay: 1500,

stopOnLastSlide: false, //当切换到最后一个slide时是否自动停止切换，false：不停止；true:停止

disableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay。

reverseDirection: true, //开启反向自动轮播。

waitForTransition: true //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。

fadeEffect: {

crossFade: false

cubeEffect: {

slideShadows: true, //开启slide阴影。默认 true。

shadow: true, //开启投影。默认 true。

shadowOffset: 100, //投影距离。默认 20，单位px。

shadowScale: 0.6 //投影缩放比例。默认0.94。

coverflowEffect: {

rotate: 30, //slide做3d旋转时Y轴的旋转角度。默认50。

stretch: 10, //每个slide之间的拉伸值，越大slide靠得越紧。默认0。

depth: 60, //slide的位置深度。值越大z轴距离越远，看起来越小。默认100。

modifier: 2, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。

slideShadows: true //开启slide阴影。默认 true。

flipEffect: {

slideShadows: true, //slides的阴影。默认true。

limitRotation: true //限制最大旋转角度为180度，默认true。

zoom: {

maxRatio: 5, //最大倍数

minRatio: 2, //最小倍数

toggle: false, //不允许双击缩放，只允许手机端触摸缩放。

containerClass: "my-zoom-container" //zoom container 类名

navigation: {

nextEl: ".swiper-button-next", //前进按钮的css选择器或HTML元素。

prevEl: ".swiper-button-prev", //后退按钮的css选择器或HTML元素。

hideOnClick: true, //点击slide时显示/隐藏按钮

disabledClass: "my-button-disabled", //前进后退按钮不可用时的类名。

hiddenClass: "my-button-hidden" //按钮隐藏时的Class

pagination: {

el: ".swiper-pagination",

type: "bullets",

//type: 'fraction',

//type : 'progressbar',

//type : 'custom',

progressbarOpposite: true, //使进度条分页器与Swiper的direction参数相反

bulletElement: "li", //设定分页器指示器（小点）的HTML标签。

dynamicBullets: true, //动态分页器，当你的slide很多时，开启后，分页器小点的数量会部分隐藏。

dynamicMainBullets: 2, //动态分页器的主指示点的数量

hideOnClick: true, //默认分页器会一直显示。这个选项设置为true时点击Swiper会隐藏/显示分页器。

clickable: true //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。

scrollbar: {

el: ".swiper-scrollbar",

hide: true, //滚动条是否自动隐藏。默认：false，不会自动隐藏。

draggable: true, //该参数设置为true时允许拖动滚动条。

snapOnRelease: true, //如果设置为false，释放滚动条时slide不会自动贴合。

dragSize: 30 //设置滚动条指示的尺寸。默认'auto': 自动，或者设置num(px)。

// 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger

debugger: true,

//autoplay: 3000,

slidesPerView: "auto",//设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。

centeredSlides: true,//<span style="color:rgb(68,68,68);font-family:'microsoft yahei';font-size:13px;">设定为true时，活动块会居中，而不是默认状态下的居左。</span>

大概就是这些了，上面也有一个案例，有兴趣的可以去体验下；

注释：这里遇到了几个问题，这里跟大家说下：

1.当使用真实数据渲染的时候，分页器不显示，和滚动到最后一张停止：原因是因为this.commodity刚开始数据为[],后来赋值才有值，所以要先判断this.commodity是否为空

2.上面提到的获取轮播图片的下标索引，记得使用this.realIndex

3.当this.commodity只有一张图片时，他也会单图自动滚动轮播，这是需要判断