相信很多朋友都和我一样在Vue中使用swiper遇到过很多问题,首先swiper轮播图,确实很强大,集成了各种功能,几乎包含了各类型轮播图的需求,点击切换,鼠标滚轮控制切换等交互做的也是很完善,还可以做H5的一屏动画页面,滑动翻页等。
因为swiper大部分版本和Vue的兼容性并没有那么好,在Vue中转JS的写法又太麻烦,通过查找方案,发现安装时将swiper版本锁定在3便可解决。
安装vue,一定要标明版本, 安装过其他版本的要先卸载哦
npm install swiper@3 --save-dev
或:(一般第一种即可,下面实例便是第一种方法安装)
npm i swiper@3.4.2 -S
全局引入,写在main.js,如果不需要全局引入可以不写
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import 'swiper/dist/css/swiper.min.css' import 'swiper/dist/js/swiper.min' Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')
示例代码,安装好后全选复制到你的页面即可,此案例为局部引入,无需在main,js中引入
<template> <div class="about"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <!-- <div class="swiper-scrollbar"></div>--> </div> </div> </template> <script> // 局部引入swiper,如果在main.js中引入过,以下三行可不写 import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; import 'swiper/dist/js/swiper.min'; // --------------------E-ND-------------- export default { name: 'About', data() { return {}; }, mounted() { new Swiper('.swiper-container', { loop: true, //无缝轮播 // 如果需要分页器 pagination: '.swiper-pagination', // 如果需要前进后退按钮 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', mousewheelControl: true //开启鼠标滚轮控制 // 如果需要滚动条 // scrollbar: '.swiper-scrollbar', //如果需要自动切换海报 // autoplay: { // delay: 1000,//时间 毫秒 // disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true // }, }); } }; </script> <style scoped> .swiper-container { height: 500px; width: 100%; } .swiper-wrapper .swiper-slide { width: 100%; height: 100%; background-color: #42b983; text-align: center; line-height: 500px; } </style>
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!