Vue-awesome-swiper的一个坑

Vue项目的package.json中显示的”Vue-awesome-swiper”: “^2.5.4”，用npm install自动安装依赖时装的版本为”version”: “2.6.7”2.5.4与2.6.7都是基于swiper3的，从官网上swiper3的教程来看并不需要单独引入样式文件，而2.6.7版本需要单独引入swiper/dist/css目录下的swiper.css样式文件（类似于swiper4）。并且2.6.7版本swiper位于node_modules/Vue-awesome-swiper/node_modules下；2.5.4不需要单独引入样式文件，并且swiper直接位于node_modules文件夹下

基本的使用方法

安装

1	npm install Vue-awesome-swiper --save

引用

CDN

<link rel="stylesheet" href="path/to/swiper/dist/css/swiper.css"/>
<script type="text/javascript" src="path/to/swiper.js"></script>
<script type="text/javascript" src="path/to/Vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/Vue-awesome-swiper.js"></script>
<script type="text/javascript">Vue.use(window.VueAwesomeSwiper)</script>

NPM

1	npm(cnpm) install Vue-awesome-swiper --save

使用

在main.js里面引入如下

1
2
3

import VueAwesomeSwiper from 'Vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper,  {  global  } )//全局挂载Vue-awesome-swiper

在对应的组件中

<swiper :options="swiperOption">
    <swiper-slide><img src="/"></swiper-slide>
      ...
    <div class="swiper-scrollbar" slot="scrollbar"></div> //标页码
    <div class="swiper-scrollbar" slot="scrollbar"></div> //滚动条
</swiper>
    <!--以下看需要添加-->
    <div class="swiper-button-next"></div> //下一项
    <div class="swiper-button-prev"></div> //**上一项**
 import 'swiper/dist/css/swiper.css'//如果全局未引入组件中必须加入


 import { swiper, swiperSlide } from 'Vue-awesome-swiper'
 export default {
    data(){
      return{
         swiperOption: {//swiper3
         autoplay: 3000,
         speed: 1000,
         }
    }
  },
  components: {
    swiper,
    swiperSlide
  }
}

api配置(swiper4)

参数	默认值	类型	说明
autoplay	Object	autoplay	自动切换
…	…	…	…

想了解更多api请移步swiper

Δ~~~~Δ
ξ •ェ• ξ
ξ　~　ξ
ξ　　 ξ
ξ　　　“~～~～〇
ξ　　　　　　 ξ
ξ　ξ　ξ~～~ξ　ξ
　ξ_ξξξ　ξξξ_ξ
　　ヽ(´•ω•)ノ
　　　 |　 /
　　　 UU”

本文结束谢谢大家的阅读