vue-awesome-swiper轮播插件_七喜_前端开发者

1. github上搜索vue-awesome-swiper

1. github上搜索vue-awesome-swiper

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

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

3. 在项目main.js中引入

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 } */)
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

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


import VueAwesomeSwiper from
// require styles

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

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

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

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

</swiper-slide>
<swiper-slide>I
m Slide 5</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:

,
// 子组件的data必须是个函数
data() {
return {
swiperOption: {}
}
},
}
</script>

<style lang=”stylus” scoped>

</style>// 子组件的data必须是个函数scoped

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

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

<home-swiper></home-swiper>
import HomeHeader from

import HomeSwiper from ‘./component/Swiper’

export
default {
name:
,
components: {
HomeHeader,
HomeSwiper
}

}
HomeSwiper

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

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

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

处理方法:swiper外层嵌套div,让这个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>
<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>

<div class=”wrapper”>

</div>


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

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

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

m Slide 1</swiper-slide>
<swiper-slide>I
m Slide 3</swiper-slide>
<swiper-slide>I
m Slide 5</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: ,
// 子组件的data必须是个函数
data() {
return {
swiperOption: {
pagination:
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>
}
//三个箭头是穿透,这样就突破了scoped的限制
//这个class名从何而来,是从页面中审查元素得到的
.wrapper >>> .swiper-pagination-bullet-active
background: red !important

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

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

处理方法:v-for循环item,注意循环要加key

处理方法:v-for循环item,注意循环要加keyv-for循环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>
<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>

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


export
default {
name:
,
// 子组件的data必须是个函数 data() {
return {
swiperOption: {
pagination:

},
swiperList: [{ id:
swiperList: [{ id: ‘0001’, imgUrl: ‘http://lkadand.adoaidiajd.jada.jpg’ }, { id: ‘0002’, imgUrl: ‘jndakm.adkand.sda.jpg’ }]
}
},
}
}]//三个箭头是穿透,这样就突破了scoped的限制//这个class名从何而来,是从页面中审查元素得到的active
background: red
important
.wrapper
overflow: hidden
width:

height:

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

9.循环轮播

9.循环轮播

处理方法:加loop值为true

处理方法:加loop值为trueloop

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

for
export
default {
name:
,
// 子组件的data必须是个函数 data() {
return {
swiperOption: {
pagination:
,
loop:
loop: true
},
swiperList: [{ id:
}]
}
},
}
//三个箭头是穿透,这样就突破了scoped的限制//这个class名从何而来,是从页面中审查元素得到的active
background: red
important
.wrapper
overflow: hidden
width:

height:

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

 

» 本文来自:前端开发者 » 《vue-awesome-swiper轮播插件_七喜_前端开发者》
» 本文链接地址:https://www.rokub.com/73504.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!