vue实现页面切换滑动效果


Posted in Javascript onJune 29, 2020

本文实例为大家分享了vue实现页面切换滑动的具体代码,供大家参考,具体内容如下

试着用Vue做了个页面切换时滑动的效果,如下示例,源码

vue实现页面切换滑动效果

这里使用了Vue的transition组件,具体可见文档

直接看实现过程

先在本机安装vue-cli

npm install -g @vue/cli

初始化一个项目

vue create hello-world

创建完毕后安装vue-router和vuex,现在vue-cli3支持图形化界面,可以直接在项目目录用ui启动,在管理页面点击安装

vue ui

然后建立这样一个项目结构

vue实现页面切换滑动效果

store.js

首先在vuex的仓库里存储页面切换的状态

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
 states: 'turn-left'
 },
 mutations: {
 setTransition(state, states) {
 state.states = states
 }
 },
 actions: {

 }
})

建立四个切换用的页面

A,B,C,D换个颜色就行,记得在router.js里配置下路由,有问题可以去我的仓库看源码。

<template>
 <div class="A">
 <top title="a"></top>
 <bottom bg="red"></bottom>
 </div>
</template>

<script>
 import top from "../components/top.vue";
 import bottom from "../components/bottom.vue";
 export default {
 data() {
 return {};
 },
 components: {
 top,
 bottom
 }
 };
</script>

<style scoped>
 .A {
 width: 100%;
 height: 100%;
 background-color: blue;
 position: fixed;
 }

</style>

顶部标题和底部颜色都通过props传给子组件

top.vue

<template>
 <div class="header">
 <div class="left" @click="back">
 back
 </div>
 <div class="center">
 {{title}}
 </div>
 </div>
</template>

<script>
 export default {
 data() {
 return {};
 },
 props: ["title"],
 methods: {
 back() {
 this.$store.commit("setTransition", "turn-right");
 this.$router.back(-1);
 }
 }
 };
</script>

<style scoped>
 .header {
 position: fixed;
 width: 100%;
 height: 40px;
 line-height: 40px;
 background-color: rgb(100, 231, 60);
 }
 .clearfix {
 overflow: auto;
 }
 .left {
 position: fixed;
 left: 0;
 width: 60px;
 }
 .center {
 left: 50%;
 position: fixed;
 }
</style>

bottom.vue

<template>
 <div class="bottom" :style="'top:'+ num + 'px;background-color: '+ bg + ';'">
 bottom
 </div>
</template>

<script>
 export default {
 name: "bottom",
 data() {
 return {
 num:0,
 test:1,
 };
 },
 props: ["bg"],
 mounted() {
 let screenH = document.documentElement.clientHeight || window.innerHeight;
 window.console.log(screenH);
 this.num = screenH - 50 - 50;
 }
 }
</script>

<style scoped>
 .bottom {
 width: 100%;
 height: 50px;
 line-height: 50px;
 position: absolute;
 }
</style>

过程中遇到的问题

原本底部是使用fixed定位的,但fixed在transition的动画中会出现一些奇怪的抖动,原因不明,有大佬知道的话希望能留言告知下。

这里使用absolute替代了fixed,进页面时获取页面高度,然后计算出top值。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
js prototype截取字符串函数
Apr 01 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 #Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 #Javascript
vue实现列表滚动的过渡动画
Jun 29 #Javascript
element跨分页操作选择详解
Jun 29 #Javascript
vue实现数字滚动效果
Jun 29 #Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 #Javascript
Vue实现可移动水平时间轴
Jun 29 #Javascript
You might like
PHP4中session登录页面的应用
2008/07/25 PHP
php5.3 废弃函数小结
2010/05/16 PHP
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
JavaScript 函数式编程的原理
2009/10/16 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
在Django的session中使用User对象的方法
2015/07/23 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
numpy基础教程之np.linalg
2019/02/12 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
会计系中文个人求职信
2013/12/24 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
nginx服务器的下载安装与使用详解
2021/08/02 Servers
美元符号 $
2022/02/17 杂记
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python