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 相关文章推荐
ext实现完整的登录代码
Aug 08 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
利用原生JS实现data方法示例代码
May 28 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
Javascript confirm多种使用方法解析
Sep 25 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
php编写一个简单的路由类
2011/04/13 PHP
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
PHP安全性漫谈
2012/06/28 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
use jscript List Installed Software
2007/06/11 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
Python实现控制台输入密码的方法
2015/05/29 Python
Python做简单的字符串匹配详解
2017/03/21 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
django基础学习之send_mail功能
2019/08/07 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
美国时尚在线:Showpo
2017/09/08 全球购物
铁路工务反思材料
2014/02/07 职场文书
年终晚会主持词
2014/03/25 职场文书
廉洁使者实施方案
2014/03/29 职场文书
团日活动总结
2014/04/28 职场文书
医学生求职信
2014/07/01 职场文书
老人节标语大全
2014/10/08 职场文书
Python保存并浏览用户的历史记录
2022/04/29 Python