vue 注册全局swiper_vue 注册全局swiper_项目中使用vue-awesome-swiper

一.简介

Swiper常用于移动端网站的内容触摸滑动

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，以及PC端网站。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

下载安装

1. 选用npm下载安装

项目目录

win7下，cmd终端，进入根目录，cnpm install vue-awesome-swiper@2.6.7 --save

我的网速慢，使用cnpm代替npm，@2.6.7表示安装的版本，--save本地测试还是项目上线，都会用到vue-awesome-swiper@2.6.7

安装完成后，在项目的node_modules目录下会找到

2.使用

全局挂载：import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'// require stylesimport 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper, /* { default global options } */)

组件挂载// require stylesimport 'swiper/dist/css/swiper.css'import { swiper, swiperSlide } from 'vue-awesome-swiper'export default {  components: {

swiper,

swiperSlide

}

}

由于我们要在很多地方用到该插件，选用全局方式，把上述全局代码复制到src/main.js中

2.SPA在单页面开发中的应用

新建一个.vue文件，按照以下代码模式更改

I'm Slide 1

I'm Slide 2

I'm Slide 3

I'm Slide 4

I'm Slide 5

I'm Slide 6

I'm Slide 7

export default {    name: 'carrousel',

data() {      return {        swiperOption: {          // some swiper options/callbacks

// 所有的参数同 swiper 官方 api 参数

// ...

}

}

},    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)

}

}

例如：

作者：fenerchen

链接：https://www.jianshu.com/p/c4925ef55eaa