当前位置:首页 > 编程教程 > vue技术文章 > vue移动端实现手机左右滑动入场动画

vue移动端实现手机左右滑动进入的实例

  • 发布时间:
  • 作者:码农之家
  • 点击:102

这篇文章主要知识点是关于vue、手机滑动效果、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript+Vue+React全程实例
  • 类型:JS实例大小:59150 MB M格式:PDF作者:郑均辉,薛燚
立即下载

Tags:Vue 手机滑动效果 

vue移动端实现手机左右滑动入场动画

本文实例为大家分享了vue移动端实现手机左右滑动入场的具体代码,供大家参考,具体内容如下

app.vue

<template>
 <div id="app">
 <transition :name="transitionName">
 <keep-alive >
 <router-view v-if="$route.meta.keepAlive" class="Router"></router-view>
 </keep-alive>
 </transition >
 <transition :name="transitionName">
 <router-view v-if="!$route.meta.keepAlive" class="Router"></router-view>
 </transition >
 <Play></Play>
 </div>
</template>
<script>import Play from './components/play'
export default {
 name: 'App',
 data () {
 return {
 transitionName: 'slide-left'
 }
 },
 watch: {
 '$route' (to, from) {
 // 切换动画
 let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
 if (isBack === true) {
 this.transitionName = 'slide-right'
 // from.meta.keepAlive = false
 // to.meta.keepAlive = true
 } else {
 // from.meta.keepAlive = true
 // to.meta.keepAlive = false
 // this.transitionName = 'slide-left'
 if (this.$route.path.split('/').length < 3) {
  this.transitionName = 'slide-fade'
 } else {
  this.transitionName = 'slide-left'
 }
 }
 this.$router.isBack = false
 }
 },
 components: {
 Play
 }
}
</script>

<style>
.Router {
 font-family: Roboto, Lato, sans-serif;
 position: absolute;
 width: 100%;
 height: 100%;
 padding-bottom: 60px;
 transition: all .377s ease;
 box-sizing: border-box;
 overflow: auto;
}
.slide-left-enter,
.slide-right-leave-active {
 opacity: 0;
 -webkit-transform: translate(100%, 0);
 transform: translate(100%, 0);
}

.slide-left-leave-active,
.slide-right-enter {
 opacity: 0;
 -webkit-transform: translate(-100%, 0);
 transform: translate(-100% 0);
}
.ovf {
 overflow: hidden;
}
.center {
 width: 95%;
 margin: 0 auto;
 overflow-y: hidden;
}
li {
 list-style: none;
}
</style>

路由配置

{
 path: '/playListDetail/:id',
 name: 'playListDetail',
 component: pather => require(['../components/playListDetail.vue'], pather),
 meta: {
 title: '歌单详情',
 keepAlive: true,
 isBack: false
 }
 },

返回事件

back () {
 this.$router.go(-1)
 this.$router.isBack = true
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • vue实现滑动切换效果的实例代码
  • 本文实例为大家分享了vue实现滑动时红黄色块左右滑动相应距离,效果如下图 实现过程主要在于实时跟踪手指滑动位置与原位置之间的偏移量,再相应移动红黄块。 红黄块布局如下 back中包含back-l,back-r左右两块,正常情况下为了隐藏其中一块,子模块需要设置display: inline-block,并且宽度都需要设置width: 100%。父模块中设置white-space: nowrap用于处理两个子模块之间的空白。 template……

  • 移动端滑动切换组件封装 vue-swiper-router
  • 具体代码如下所述: strong组件部分/strongtemplate div class=main div class=page-tab div :class=nowPath == item.path ? tab-item tab-item_active : tab-item v-for=(item, index) in tabList :key=index router-link mode=out-in :to=item.path{{item.name}} /router-link /div /div transition :name=slideDirection slot /slot /transition /div/templatescriptexport default { props: { tabList: Array }, mounted() { this.nowPath = this.$route.path; this.initTouchedEvent(); }, data() { return { tabSwiper……

    vue实例 相关电子书
    学习笔记
    网友NO.636423

    vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法

    目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框。网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受推荐的pdf.js插件来实现。 pdf.js可以从github上clone下来,然后本地gulp生成可用的pdf.js和pdf.worker.js(参考readme即可)。 不过更简单的方法是使用cnpm来安装: cnpm isntall --save pdfjs-dist,然后可以在项目中使用了,我使用插件的方式。具体使用示例: pdf.vue templatep id="container" !-- p class='pdf-page' -- canvas id="the-canvas"/canvas/pp class="foot" v-if="pdfDoc"button class="left" click="onPrevPage" v-if="pageNum1"上一页/buttonbutton class="right" click="onNextPage" v-if="pageNumpdfDoc.numPages"下一页/button/p !-- /p --p/p/templatescriptimport PDFJS from 'pdfjs-dist' export default { data () { return { pdfDoc: null, pageNum: 1,……

    网友NO.100604

    详解Vue调用手机相机和相册以及上传

    组件 template div input id="upload_file" type="file" accept='image/*' name="file" @change="fileChange($event)"/ div class="image-item space" @click="showActionSheet()" div class="image-up"/div /div div class="upload_warp" div class="upload_warp_img" div class="upload_warp_img_div" v-for="(item,index) in imgList" div class="upload_warp_img_div_top" img src="http://114.115.162.39/static/image/x.png" class="upload_warp_img_div_del" @click="fileDel(index)" /div img :src="item.file.src" /div div class="upload_warp_left" id="upload_warp_left" @click="fileClick()" v-if="this.imgList.length 6" !--img src="../assets/upload.png"-- img src="../assets/images/添加图片.png" class="imgs"/ /div /div /div div class="upload_warp_text" span选中{{imgList.length}}张文件,共{{bytesToSize(this.size)}}/span /div /div /template javaScript代码 script type="text/ecmascript-6" export default { name: "cameras-and-albums", data(){ return{ imgList: [], datas: new FormData(), files:0, size:0 } }, metho……

    网友NO.126839

    vue2手机APP项目添加开屏广告或者闪屏广告

    一般项目里,有的会在启动的时候加开屏广告或者闪屏广告。我们是在index.html通过定位来做的。如下: style media="screen" #entry { width: 100%; height: 100%; z-index: 200; position: relative; } #entryAdv { display: none; } #entryTim { position: fixed; width: 2.2rem; line-height: 0.68rem; font-size: 0.32rem; z-index: 400; text-align: center; border-radius: 2rem; top: 0.5rem; right: 0.5rem; border: 1px solid #ccc; }/stylebody!-- 开屏广告 --section class="adv" id="entryAdv" img id="entry" p id="entryTim"/p/section!-- 入口元素 --section id="app"/section/body 然后我们需要单独写一份js文件,跟main.js是同级目录的,具体代码如下: import api from './fetch/api'import store from './store/index'// 修改开屏广告图片尺寸let advWidth = document.documentElement.clientWidth;let advHeight = document.documentElement.clientHeight;let entryEl = document.getElementById('entry');entryEl.style.widht = advWidth + 'px';entryEl.styl……

    <
    1
    >

    电子书 编程教程 PC软件下载 安卓软件下载

    Copyright 2018-2020 xz577.com 码农之家

    本站所有电子书资源不再提供下载地址,只分享来路

    免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

    版权投诉 / 书籍推广 / 赞助:QQ:520161757