vue-awesome-swiper轮播插件

1. github上搜索vue-awesome-swiper

2. readme中有安装方法，建议在插件名后@版本号，使用稳定的老版本 npm install vue-awesome-swiper@x.x.x --save

3. 在项目main.js中引入

import Vue from 'vue'

import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles

import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

4.创建单文件组件Swiper.vue（单文件组件三部分template、script、style）

<template>

    <swiper :options="swiperOption">

        <!-- slides -->
　　　　 //这里是轮播的内容

        <swiper-slide>I'm Slide 1</swiper-slide>

        <swiper-slide>I'm Slide 2</swiper-slide>

        <swiper-slide>
　　　　　　<img src=""/>
　　　　  </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>

export default {

    name: 'HomeSwiper',

    // 子组件的data必须是个函数

    data() {

        return {

            swiperOption: {}

        }

    },

}

</script>

<style lang="stylus" scoped>

</style>

5. 在别的页面中引用，如在Home.vue

<template>

    <div>

        <home-header></home-header>

        <home-swiper></home-swiper>

    </div>

</template>

<script>

import HomeHeader from './component/Header'

import HomeSwiper from './component/Swiper'

export default {

    name: 'Home',

    components: {

        HomeHeader,

        HomeSwiper

    }

}

</script>

<style lang="stylus">

</style>

6.防抖动：在网速不好的情况下，swiper未加载出前，下方的div会占据，等到swiper出来时，占据位置的div会蹦走

处理方法：swiper外层嵌套div，让这个div撑开高度

<template>

    <div class="wrapper">

        <swiper :options="swiperOption">

            ...

        </swiper>

    </div>

</template>

<script>

    ...

</script>

<style lang="stylus" scoped>

  .wrapper

    overflow: hidden

    width:100%

    height:0

    padding-bottom: 31.25%   (宽高比,如果写在height，那么是和父级元素的高度,不是对比wrapper的宽度)

</style>

7.轮播图下面跟着跑的一排小圆点

<template>

    <div class="wrapper">

        <swiper :options="swiperOption">

            <!-- 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>

    </div>

</template>

<script>

export default {

    name: 'HomeSwiper',

    // 子组件的data必须是个函数

    data() {

        return {

            swiperOption: {

                pagination: 'swiper-pagination'

            }

        }

    },

}

</script>

<style lang="stylus" scoped>

  //三个箭头是穿透，这样就突破了scoped的限制

  //这个class名从何而来，是从页面中审查元素得到的

  .wrapper >>> .swiper-pagination-bullet-active

    background: red !important

  .wrapper

    overflow: hidden

    width:100%

    height:0

    padding-bottom: 31.25%   (宽高比,如果写在height，那么是和父级元素的高度,不是对比wrapper的宽度)

</style>

8.Vue是数据驱动的框架，轮播的图片地址和数量不该固定写死

处理方法：v-for循环item，注意循环要加key

<template>

    <div class="wrapper">

        <swiper :options="swiperOption">

            <!-- slides -->

            <swiper-slide v-for="item of swiperList" :key="item.id">
　　　　　　　　　　<img :src="item.imgUrl" />
　　　　　　　</swiper-slide>

            <!-- Optional controls -->

            <div class="swiper-pagination" slot="pagination"></div>

        </swiper>

    </div>

</template>

<script>

export default {

    name: 'HomeSwiper',

    // 子组件的data必须是个函数

    data() {

        return {

            swiperOption: {

                pagination: 'swiper-pagination'

            },

            swiperList: [{ id: '0001', imgUrl: 'http://lkadand.adoaidiajd.jada.jpg' }, { id: '0002', imgUrl: 'jndakm.adkand.sda.jpg' }]

        }

    },

}

</script>

<style lang="stylus" scoped>

  //三个箭头是穿透，这样就突破了scoped的限制

  //这个class名从何而来，是从页面中审查元素得到的

  .wrapper >>> .swiper-pagination-bullet-active

    background: red !important

  .wrapper

    overflow: hidden

    width:100%

    height:0

    padding-bottom: 31.25%   (宽高比,如果写在height，那么是和父级元素的高度,不是对比wrapper的宽度)

</style>

9.循环轮播

处理方法：加loop值为true

<template>

    <div class="wrapper">

        <swiper :options="swiperOption">

            <!-- slides -->

            <swiper-slide v-for="item of swiperList" :key="item.id"><img :src="item.imgUrl" /></swiper-slide>

            <!-- Optional controls -->

            <div class="swiper-pagination" slot="pagination"></div>

        </swiper>

    </div>

</template>

<script>

export default {

    name: 'HomeSwiper',

    // 子组件的data必须是个函数

    data() {

        return {

            swiperOption: {

                pagination: 'swiper-pagination',

                loop: true

            },

            swiperList: [{ id: '0001', imgUrl: 'http://lkadand.adoaidiajd.jada.jpg' }, { id: '0002', imgUrl: 'jndakm.adkand.sda.jpg' }]

        }

    },

}

</script>

<style lang="stylus" scoped>

  //三个箭头是穿透，这样就突破了scoped的限制

  //这个class名从何而来，是从页面中审查元素得到的

  .wrapper >>> .swiper-pagination-bullet-active

    background: red !important

  .wrapper

    overflow: hidden

    width:100%

    height:0

    padding-bottom: 31.25%   (宽高比,如果写在height，那么是和父级元素的高度,不是对比wrapper的宽度)

</style>

巴特西

vue-awesome-swiper轮播插件

最新文章

热门文章