一、引入swiper
整个H5页面是嵌套在vue项目里面，所以要引入npm install vue-awesome-swiper --save;
// 下载依赖包
npm install vue-awesome-swiper --save
在根组件main.js中
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'// swiper的css
import 'swiper/dist/css/swiper.css'// 注册全局
Vue.use(VueAwesomeSwiper, /* { default global options } */)
在具体的vue页面中
// swiper的css
import 'swiper/dist/css/swiper.css'import { swiper, swiperSlide } from 'vue-awesome-swiper'export default {components: {swiper,swiperSlide}
}
二、官方代码示例
<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>
三、H5动画需求
现在有个需求：当手指滑动翻页后重新加载动画
// <template>中的html
<swiper-slide><div id="change_1" class="title_1"></div>
</swiper-slide>// <script>中data里面的数据
data() {return {swiperOption: {direction: 'vertical', // 垂直方向滑动// 这里我vue下的swiper是4.0的，可是4.0的API我用不了，只能用swiper3.0的API了！这个API表示当有屏幕滑动的会触发某个事件。// swiper.activeIndex表示当前处于哪个页面的index，它是swiper自身提供的对象// 我的做法：是当有手指滑动时来判断swiper.activeIndex，根据它来改变div的类名，改变类名就能重新 调用动画了onTouchMove(swiper) {if (swiper.activeIndex == 0) {// 获取div的id，replace表示如果有title_1就删除并添加title_1_amdocument.getElementById('change_1').classList.replace("title_1", "title_1_am");}else if (swiper.activeIndex == 1) {document.getElementById('change_1').classList.replace("title_1_am", "title_1");}}}}
}// <style>中的css样式
.title_1 {animation: mychange01 4s ease 0s 1 normal;
}
@keyframes mychange01 {0% {opacity: 0;left: 50px;}100% {opacity: 1;left: 50px;}
}
.title_1_am {animation: mychange011 4s ease 0s 1 normal;
}
@keyframes mychange011 {0% {opacity: 0;left: 50px;}100% {opacity: 1;left: 50px;}
}
四、小结
因为是第一次写H5页面，没什么经验，所以可能用了最笨的方法，但是最起码功能实现了！上面代码两个动画是一模一样的只是名称不一样，如果有大佬有更好的做法欢迎留言我会及时回复并学习！