vue实现页面切换滑动效果

npm install -g @vue/cli

vue create hello-world

vue ui

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: {

 }
})

<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>

<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>

<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>