最近公司首页做改造升级,由原先的长图变成轮播,当时觉得搞个插件很快解决,没想到一个插件经历了很多坑。话不多说,直接上demo
第一步:安装依赖 cnpm install vue-awesome-swiper@2.6.7 --save, cnpm install swiper@4.5.1 --save 注意版本不同可能会存在配置语法不同,大家注意这一个坑
第二步:局部引用或全局引用组件,我在项目中采用的是局部引用
<script>
import { swiper, swiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
components: {
swiper,
swiperSlide
},
directives: {
swiper: directive
},
data() {
return {
url: '',
bannerList: [],
swiperOption: {
observer: true, // 修改swiper