本文例項為大家分享了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值。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。