vue实现页面切换滑动效果

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

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

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

直接看实现过程

先在本机安装vue-cli

npm install -g @vue/cli

初始化一个项目

vue create hello-world

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

vue ui

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

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里配置下路由，有问题可以去我的仓库看源码。

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

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

top.vue

 .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;
 }

bottom.vue

 .bottom {
 width: 100%;
 height: 50px;
 line-height: 50px;
 position: absolute;
 }

过程中遇到的问题

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。