本文实例为大家分享了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里配置下路由，有问题可以去我的仓库看源码。

<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组件学习教程进行学习。

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