vue實現(xiàn)頁面切換滑動效果

更新時間：2020年06月29日 15:12:05 作者：木習(xí)習(xí)C

這篇文章主要為大家詳細介紹了vue實現(xiàn)頁面切換滑動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)頁面切換滑動的具體代碼，供大家參考，具體內(nèi)容如下

試著用Vue做了個頁面切換時滑動的效果，如下示例，源碼

這里使用了Vue的transition組件，具體可見文檔

直接看實現(xiàn)過程

先在本機安裝vue-cli

npm install -g @vue/cli

初始化一個項目

vue create hello-world

創(chuàng)建完畢后安裝vue-router和vuex，現(xiàn)在vue-cli3支持圖形化界面，可以直接在項目目錄用ui啟動，在管理頁面點擊安裝

vue ui

然后建立這樣一個項目結(jié)構(gòu)

store.js

首先在vuex的倉庫里存儲頁面切換的狀態(tài)

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的動畫中會出現(xiàn)一些奇怪的抖動，原因不明，有大佬知道的話希望能留言告知下。

這里使用absolute替代了fixed，進頁面時獲取頁面高度，然后計算出top值。

關(guān)于vue.js組件的教程，請大家點擊專題vue.js組件學(xué)習(xí)教程進行學(xué)習(xí)。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: