使用vue-awesome-swiper制作H5动画页面

一、引入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页面，没什么经验，所以可能用了最笨的方法，但是最起码功能实现了！上面代码两个动画是一模一样的只是名称不一样，如果有大佬有更好的做法欢迎留言我会及时回复并学习！

使用vue-awesome-swiper制作H5动画页面相关推荐

LAYA和TypeScript制作H5入门——页面制作
上一篇: LAYA和TypeScript制作H5入门--准备工作一般情况下,一个H5是由多个相互关联的ui页面串联组成.遵循的大致逻辑一般是加载页面,开始页面,内容页面和结束页面.这些界面承担了用户 ...
动漫制作都用html5吗,怎么制作h5动画？
有小伙伴提问,需要在ae软件中制作h5动画?具体该怎么做呢?h5动画也是制作动画教程的一种方法,区别就是展现形式不同,本质和mg动画差不多,特点就是运用效果突出人物本身,日常学习中我们可以从简单的操作 ...
微信笔记html5,微信HTML5活动动画页面开发笔记
一直在各种微信公共账号里面看到有很多营销手法都是靠这种特炫的活动页面来做宣传,虽然知道是它通过什么技术来实现的,但是一直没有亲手去开发过,正好帮朋友做了一个活动,这里就写篇文章做个笔记吧! 实现步骤: ...
h5 登录页面_一份写给新手的微信H5页面制作流程介绍
作为一种非常受欢迎的营销推广方式,H5页面具有交互性好.易于传播.感官体验丰富.利于效果追踪等优势.由于H5页面的传播主阵地是微信,所以很多刚接触H5页面的新手经常误以为H5页面只能在微信中传播,也就 ...
怎么_如何制作h5页面？
近年来,h5突然开始风靡全国,与此同时也涌现出了一批以此为生的h5页面开发商或软件供应商. 尽管如此,还是有许多人喜欢亲自动手开发h5页面.下面,笔者将会从几个方面简单地介绍如何制作h5页面. 完整的 ...
animate cc开发html5游戏,使用Create.js与Adobe Animate CC制作H5落地页动画
一.背景在移动端,利用H5技术,可实现微杂志,微信邀请函,H5小游戏等营销互动等应用开发,本文将介绍一种Create.js与Adobe Animate CC结合来制作H5落地页的方法. 通过两者结合 ...
推荐一款制作H5页面的可视化工具
推荐一款制作H5页面的可视化工具无需写代码,可视化H5页面制作编辑器.使用JS写的,直接谷歌浏览器打开即可使用. 无需写代码,可视化H5页面制作编辑器.使用JS写的,直接谷歌浏览器打开即可使用. 下 ...
ae制h5文字动画_绝对干货！H5动画制作方法全揭秘
原标题:绝对干货!H5动画制作方法全揭秘近年来,H5页面火爆整个移动互联网,这些页面的炫酷展现,都离不开动效设计和制作,而动效设计和制作早已成为一名合格设计师必需掌握的技能. 目前,设计师制作H5页 ...
CreateJS 制作 H5 长图动画
对于 H5 动画,相信大家都不陌生,现在很多大公司的手机宣传页面以及公众号推文中,都能够看到各式各样的 H5 动画效果. 如果细心观察,大家会发现,这些动画或者小游戏,是通过一些工具生成出来的,而不是 ...
这个好用的H5动画制作软件，你知道吗?
什么是H5动画?H5动画是指以网页和动画的形式,通过动画,达成与观看者.使用者之间的动态交互,减少静态死板的场景,以提升使用者的使用体验,一个好的H5动画,对于提升网页的整体效果有显著作用. 而好看的 ...

使用vue-awesome-swiper制作H5动画页面

一、引入swiper

二、官方代码示例

三、H5动画需求

四、小结

使用vue-awesome-swiper制作H5动画页面相关推荐

最新文章

热门文章