vue中swiper vue-awesome-swiper的使用方法及各种坑解决
@是静静啊 人气:0一、什么是vue-awesome-swiper?
简而言之:
vue-awesome-swiper是基于swiper的Vue组件。是swiper推荐的在vue中使用swiper的方式。
vue-awesome-swiper的使用
1、安装
npm install vue-awesome-swiper --save-dev
2.引用
/*全局引入*/ import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css'//这里注意具体看使用的版本是否需要引入样式,以及具体位置。 Vue.use(VueAwesomeSwiper, /* { default global options } */) /*组件方式引用*/ import 'swiper/dist/css/swiper.css'这里注意具体看使用的版本是否需要引入样式,以及具体位置。 import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide }
3.使用
就是一般组件的用法
<swiper :options="swiperOption"> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> </swiper> <!--以下看需要添加--> <div class="swiper-scrollbar"></div> //滚动条 <div class="swiper-button-next"></div> //下一项 <div class="swiper-button-prev"></div> //上一项 <div class="swiper-pagination"></div> //标页码 data(){ return{ swiperOption: {//swiper3 autoplay: 3000, speed: 1000, } } }
二、由版本引起的一系列坑
坑1
按照上图安装方法,npm将安装最新的vue-awesome-swiper(@4),对应的是swiper6,但是国内暂时没有swiper6的文档,意味着没法参考使用方法,有问题也不好去网上找
坑2
最新版vue-awesome-swiper的安装姿势是这样子滴:
npm install swiper vue-awesome-swiper --save
对比vue-awesome-swiper版本3
npm install vue-awesome-swiper --save-dev
坑3
这是网上大伙查找的最多的坑,搞了很久没解决,有可能会导致小伙伴们暴躁易怒,哈哈
安装完之后,你又在某度上查找使用方法,网友一般建议你这样使用
import { swiper, swiperSlide } from "vue-awesome-swiper"; import "swiper/dist/css/swiper.css"; export default { components: { swiper, swiperSlide }, data() { return { swiperOption: { loop: true, autoplay: { delay: 3000, stopOnLastSlide: false, disableOnInteraction: false }, // 显示分页 pagination: { el: ".swiper-pagination", clickable: true //允许分页点击跳转 }, // 设置点击箭头 navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" } } }; },
然后你的vue就使劲跟你报错,说找不到swiper.css,然后你又继续某度,无限坑。。。
或者你去看了一下路径,再去node_modules找swiper,发现没有swiper这货。那就安装个swiper呗
npm install swiper --save
但是,你没有带版本,npm默认给你装的是swiper6,文件夹里的路径跟swiper4都不一样啦兄弟们。
这才是问题的根源,加入你没找到问题的核心,继续某度的话,估计还没好几天辛苦滴爬坑。
正确的使用姿势:
安装(指定版本)
npm install vue-awesome-swiper@3 --save-dev
组件中使用
这里我贴出在页面中简单使用方法(先跑起来),小伙伴们可以完全复制粘贴,复杂的东西我都简化掉了。 版本: vue@2.5.2,vue-awesome-swiper@3.1.3
<template> <div class="recommendPage"> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide>I'm Slide 1</swiper-slide> <swiper-slide>I'm Slide 2</swiper-slide> <swiper-slide>I'm Slide 3</swiper-slide> <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> </swiper> </div> </template> <script> // 引入插件 import { swiper, swiperSlide } from "vue-awesome-swiper"; import "swiper/dist/css/swiper.css"; export default { components: { swiper, swiperSlide }, data() { return { swiperOption: { loop: true, autoplay: { delay: 3000, stopOnLastSlide: false, disableOnInteraction: false }, // 显示分页 pagination: { el: ".swiper-pagination", clickable: true //允许分页点击跳转 }, // 设置点击箭头 navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" } } }; }, computed: { swiper() { return this.$refs.mySwiper.swiper; } }, mounted() { // current swiper instance // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了 console.log("this is current swiper instance object", this.swiper); // this.swiper.slideTo(3, 1000, false); } }; </script> <style scoped > .recommendPage .swiper-container{ position: relative; width: 100%; height: 200px; background: pink; } .recommendPage .swiper-container .swiper-slide{ width: 100%; line-height: 200px; background: yellowgreen; color: #000; font-size: 16px; text-align: center; } </style>
三、例子
我写的是局部的,只需要在 在ha.vue页面 写好如下结构
<template> <div class=''> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="item in slide" :key="item.imgUrl"> <img :src="item.imgUrl" alt="" class="swiper-slide-img" width="100%" height="100%" /></swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div> </template>
在script引入
import { swiper, swiperSlide } from "vue-awesome-swiper"; import "swiper/dist/css/swiper.css"; export default { components: { swiper, swiperSlide }, data() { return { swiperOption: { loop: true, autoplay: { delay: 3000, stopOnLastSlide: false, disableOnInteraction: false }, // 显示分页 pagination: { el: ".swiper-pagination", clickable: true //允许分页点击跳转 }, // 设置点击箭头 navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" } } }; }, computed: { swiper() { return this.$refs.mySwiper.swiper; } }, mounted() { // current swiper instance // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了 console.log("this is current swiper instance object", this.swiper); // this.swiper.slideTo(3, 1000, false); } }; </script> <style scoped > </style>
还有一些关于版本的坑,反正真的很坑,不然我不会大半夜气呼呼在这写这玩意
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容