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組件學習教程進行學習。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
el-select如何獲取當前選中的對象所有(item)數(shù)據(jù)
在開發(fā)業(yè)務場景中我們通常遇到一些奇怪的需求,下面這篇文章主要給大家介紹了關(guān)于el-select如何獲取當前選中的對象所有(item)數(shù)據(jù)的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11vux-scroller實現(xiàn)移動端上拉加載功能過程解析
這篇文章主要介紹了vux-scroller實現(xiàn)移動端上拉加載功能過程解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10