vue-awesome-swiper轮播插件
2019-10-08 08:51:00来源:博客园 阅读 ()
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>
原文链接:https://www.cnblogs.com/VCplus/p/11627067.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:HTML学习之轮播图
下一篇:css中让元素隐藏的方法
- Emmet插件的使用 2020-04-27
- Bootstrap4 轮播+模态框+提示框+弹出框 2020-04-16
- 5个最佳WordPress通知栏插件 2020-04-12
- Sass环境安装--windows版sublime插件 2020-03-29
- Sass环境安装-Sass sublime 编辑器插件编译方法 2020-01-29
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash