vue-13-swiper

是一个滑动库, 非常丰富的滑动样式, 轮播图等

https://www.swiper.com.cn
https://github.com/surmon-china/vue-awesome-swiper

1, 基本

1.1) 安装

npm install vue-awesome-swiper --save

1.2) 全局引用

css 单独引入, 在swiper3 中干掉了, 但反应不好, 所以在swiper4 中又加了回来

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'// require styles
import 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper, /* { default global options } */)

1.3) 局部引入

// require styles
import 'swiper/dist/css/swiper.css'import { swiper, swiperSlide } from 'vue-awesome-swiper'export default {components: {swiper,swiperSlide}
}

2. 使用

2.1) 静态数据的使用 (使用方式很少)

<template><swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"><!-- slides --><swiper-slide>I'm Slide 1</swiper-slide><swiper-slide>I'm Slide 2</swiper-slide><swiper-slide>I'm Slide 3</swiper-slide><swiper-slide>I'm Slide 4</swiper-slide><swiper-slide>I'm Slide 5</swiper-slide><swiper-slide>I'm Slide 6</swiper-slide><swiper-slide>I'm Slide 7</swiper-slide><!-- Optional controls --><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><div class="swiper-scrollbar"   slot="scrollbar"></div></swiper>
</template><script>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)}}
</script>

2.2) 动态数据的引用

需要在 main.js中引入

// 使用 ssr的方式
if (process.browser) {const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')Vue.use(VueAwesomeSwiper)
}

然后在使用

<template><div>ssr的写法<div v-swiper:mySwiper="swiperOption" @someSwiperEvent="callback"><div class="swiper-wrapper"><div class="swiper-slide" v-for="banner in banners"><img :src="banner"></div></div><div class="swiper-pagination"></div></div></div></template><script>export default {name: "SSR-saiper",data () {return {banners: ['https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092','https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092','https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092' ],swiperOption: {pagination: {el: '.swiper-pagination',autoplay: true,},// some swiper options...},mounted() {setTimeout(() => {this.banners.push('/4.jpg')console.log('banners update')}, 3000)console.log('This is current swiper instance object', this.mySwiper,'It will slideTo banners 3')this.mySwiper.slideTo(3, 1000, false)}}},}
</script><style scoped></style>

本地图片需要 require

require("../assets/slideShow/j1.jpg"),require("../assets/slideShow/j2.jpg"),require("../assets/slideShow/j3.jpg"),require("../assets/slideShow/j4.jpg")

2.3) 异步数据的使用

数据使用异步的方式进行加载

<template><div>spa 的方式 使用 swiper， 写死的<swiper :options="swiperOption"><swiper-slide v-for="(slidee, index) in swiperSlides" :key="index"><img v-bind:src="slidee"/></swiper-slide><div class="swiper-pagination" slot="pagination"></div></swiper></div></template><script>export default {name: "SPA-swiper",data() {return {swiperOption: {pagination: {el: '.swiper-pagination',autoplay: true,}},swiperSlides: ['https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092','https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092','https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092','https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092','https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092',]}},mounted() {setInterval(() => {console.log('simulate async data')if (this.swiperSlides.length < 10) {this.swiperSlides.push(this.swiperSlides.length + 1)}}, 3000)}}
</script><style scoped></style>

添加其他的属性:

swiperOption: {pagination: {el: '.swiper-pagination',autoplay: true,},effect : 'coverflow',slidesPerView: 3,centeredSlides: true,},mounted() {}