日常写设计文档,日常写Demo,写轮播图的时候觉得bootstrap不适合移动端,或者说不是轻量级的,于是换成Swiper,但是写的时候才发现怎么把这东西嵌到Vue里面啊?
Σ( ° △ °|||)︴!?
果然基于Vue的插件还是很多的,于是就搜到了vue-awesome-swiper,是基于Vue和Swiper开发的轮播图插件,但是看API写出来的怎么总是报警告啊……还是自己研究研究吧……
本文只适用于Vue脚手架中的使用,CDN引入和使用参考文章最后API链接。
安装
npm
npm install vue-awesome-swiper --save
引入
全局引入
在入口文件main.js中进行引入
import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */)
局部引入
在需要用到轮播图的vue页面中引入
import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper'
并在components中添加swiper
components:{ swiper, swiperSlide }
使用
html结构
<swiper :options="swiperOption"> <swiper-slide v-for="slide in swiperSlides" :key="slide.id">I'm Slide {{ slide }}</swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper>
data:
export default { data () { return { swiperOption: { autoplay:true,//自动切换 pagination: { el: '.swiper-pagination'//分页器 } }, swiperSlides: [1, 2, 3] } } }
以上能实现基本的轮播图效果,其他效果参考Swiper官方API并在swiperOption中进行参数属性的设置即可。
Swiper4 API:
vue-awesome-swiper API: https://www.npmjs.com/package/vue-awesome-swiper
如对本文有疑问, 点击进行留言回复!!
清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错:Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导(一) --WHQL认证测试结果提交账号(一)
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论