vue实现页面切换滑动效果

 更新时间:2020-06-29 15:45:17   作者:佚名   我要评论(0)

本文实例为大家分享了vue实现页面切换滑动的具体代码,供大家参考,具体内容如下
试着用Vue做了个页面切换时滑动的效果,如下示例,源码

这里使用了Vue的transitio

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
  • 详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
  • vue实现app页面切换动画效果实例
  • Vue 路由切换时页面内容没有重新加载的解决方法
  • 基于Vue实现页面切换左右滑动效果
  • vue-router实现webApp切换页面动画效果代码
  • 使用vue-router切换页面时,获取上一页url以及当前页面url的方法
  • vue 路由页面之间实现用手指进行滑动的方法
  • vue中选项卡点击切换且能滑动切换功能的实现代码
  • vue实现滑动切换效果(仅在手机模式下可用)

相关文章

  • vue实现页面切换滑动效果

    vue实现页面切换滑动效果

    本文实例为大家分享了vue实现页面切换滑动的具体代码,供大家参考,具体内容如下 试着用Vue做了个页面切换时滑动的效果,如下示例,源码 这里使用了Vue的transitio
    2020-06-29
  • python字典的值可以修改吗

    python字典的值可以修改吗

    python中字典的值是可以被修改的,首先我们得知道什么是修改字典 修改字典 向字典添加新内容的方法是增加新的键/值对,修改或删除已有键/值对如下实例: # !/usr/b
    2020-06-29
  • Pthon接口测试环境搭建过程详解

    Pthon接口测试环境搭建过程详解

    环境搭建 python 安装:建议使用python3.7 pycharm安装 requests安装 :pip3 install requests requests 基本使用 usage: >>> import requests
    2020-06-29
  • 使用已经得到的keras模型识别自己手写的数字方式

    使用已经得到的keras模型识别自己手写的数字方式

    环境:Python+keras,后端为Tensorflow 训练集:MNIST 对于如何训练一个识别手写数字的神经网络,网上资源十分丰富,并且能达到相当高的精度。但是很少有人涉及到如
    2020-06-29
  • Python unittest基本使用方法代码实例

    Python unittest基本使用方法代码实例

    基本使用 import unittest class Testcase(unittest.TestCase): @classmethod def setUpClass(cls): pass @classmethod def tearDownClass(cls):
    2020-06-29
  • Vue如何提升首屏加载速度实例解析

    Vue如何提升首屏加载速度实例解析

    在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将
    2020-06-26
  • Java异步调用转同步方法实例详解

    Java异步调用转同步方法实例详解

    先说一下对异步和同步的理解: 同步调用:调用方在调用过程中,持续等待返回结果。 异步调用:调用方在调用过程中,不直接等待返回结果,而是执行其他任务,结果
    2020-06-26
  • C++写时拷贝实现原理及实例解析

    C++写时拷贝实现原理及实例解析

    一、什么是写时拷贝 写入时复制是一种计算机程序设计领域的优化策略。其核心思想是,如果有多个调用者同时请求相同资源(如内存或磁盘上的数据存储),他们会共同获
    2020-06-26
  • C++多线程获取返回值方法详解

    C++多线程获取返回值方法详解

    在许多时候,我们会有这样的需求——即我们想要得到线程返回的值。但是在C++11 多线程中我们注意到,std::thread对象会忽略顶层函数的返回值。 那问题来了,我们要怎
    2020-06-26
  • Sql Server数据把列根据指定内容拆分数据的方法实例

    Sql Server数据把列根据指定内容拆分数据的方法实例

    今天由于工作需要,需要把数据把列根据指定的内容拆分数据 其中一条数据实例 select id , XXXX FROM BIZ_PAPER where id ='4af210ec675927fa016772bf7dd025b0'
    2020-06-26

最新评论