vue實(shí)現(xiàn)頁(yè)面切換滑動(dòng)效果

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

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

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

試著用Vue做了個(gè)頁(yè)面切換時(shí)滑動(dòng)的效果，如下示例，源碼

這里使用了Vue的transition組件，具體可見(jiàn)文檔

直接看實(shí)現(xiàn)過(guò)程

先在本機(jī)安裝vue-cli

npm install -g @vue/cli

初始化一個(gè)項(xiàng)目

vue create hello-world

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

vue ui

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

store.js

首先在vuex的倉(cāng)庫(kù)里存儲(chǔ)頁(yè)面切換的狀態(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: {

 }
})

建立四個(gè)切換用的頁(yè)面

A,B,C,D換個(gè)顏色就行，記得在router.js里配置下路由，有問(wèn)題可以去我的倉(cāng)庫(kù)看源碼。

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

頂部標(biāo)題和底部顏色都通過(guò)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>

過(guò)程中遇到的問(wèn)題

原本底部是使用fixed定位的，但fixed在transition的動(dòng)畫(huà)中會(huì)出現(xiàn)一些奇怪的抖動(dòng)，原因不明，有大佬知道的話希望能留言告知下。

這里使用absolute替代了fixed，進(jìn)頁(yè)面時(shí)獲取頁(yè)面高度，然后計(jì)算出top值。

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

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

您可能感興趣的文章: