vue 移动端,页面左右页面切换效果(切换过程中会出现白屏效果,布吉岛怎么优化,后来就发布前就弃用了)

<transition name="left">
<router-view v-if="getCms" class="Router"/>
</transition>

data() {
names: ‘left‘
}

watch: {
  ‘$route‘(to, from) {
    if (to.index < from.index) {
      this.names = "right"
    } else {
      this.names = "left"
    }
  }
}

.left-enter {
  transform: translateX(100%);
}

.left-enter-to {
  transform: translateX(0);
}

.left-enter-active {
  transition: 1s;
}

.left-leave {
  transform: translateX(0);
}

.left-leave-to {
  transform: translateX(-100%);
}

.left-leave-active {
  transition: .5s;
}

.right-enter {
  transform: translateX(-100%);
}

.right-enter-active {
  transition: .5s;
}

.right-leave-to {
  transform: translateX(100%);
}

.right-leave-active {
  transition: .5s;
}

原文地址:https://www.cnblogs.com/1rookie/p/10151719.html

时间: 2024-10-12 18:34:09

vue 移动端,页面左右页面切换效果(切换过程中会出现白屏效果,布吉岛怎么优化,后来就发布前就弃用了)的相关文章

移动端H5单页面跟随手指滑动切换组件PageSlider

转载地址:http://www.ifrans.cn/pageslider/?replytocom=38914 PageSlider PageSlider 是一个基于zepto.js用于实现H5单页面跟随手指上下滑动切换的组件,支持通过transform3D启动GPU加速,目前仅支持移动端touch设备. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name=&

实现适配于移动页面中间的swiper图片切换

关于swiper图片切换有很多类型,我就不一一介绍了,可以直接到官网查询,今天来写一个适配于页面正中间的图片切换,也同时适配于任何图片的大小(也就是这个图片切换不用限制图片的本身大小,特别是移动端动态获取的图片有可能大小不一致),所以无论任何图片若是都想让其一直处于移动页面的正中间的话,那么就要获取到图片的tstyle样式了,好了,不多说,来看代码,既然是swiper的图片切换,那么先要引入swiper的css和js: <script type="text/javascript"

移动端网站提升页面加载性能的优化技巧

移动端网站提升页面加载性能的优化技巧 收藏到:1时间:2015-06-17   文章来源:马海祥博客   访问次数:2501 网页性能的优化一直是网站成功的关键,越来越多的研究证明,不管是小型电商,还是大型连锁企业,即使是页面加载时间方面的细微改善,都可以带来更多的业务,更多的广告收入,更多的用户粘性和更多的客户满意度. 在过去几年,Web开发者都是基于改善硬件或者提高带宽速度来优化用户体验,但是最近几年,爆炸式的移动Web浏览器的使用打破了这个途径,低带宽,高延迟,小内存,低处理器性能的移动设

移动端如何强制页面横屏

背景 最近公司要开发一个移动端的类网页游戏: 长按按钮有个自行车一直骑行,碰到某个国家的地标就弹出该国的相应say hello的tip,要求横屏显示,不能竖屏. 然而当用户竖屏打开时,而且没开启手机里的横屏模式,还要逼用户去开启.这时候用户早就不耐烦的把你的游戏关掉了. 而且有些机型有些app不能横屏:比如Android的微信就没有横屏模式,而ios的微信能开启横屏模式. 解决办法就是在竖屏模式下,写一个横屏的div,然后设置rotate正(负)90度,把他旋转过来:而且如果用户切到横屏时,需要

vue项目如何刷新当前页面

想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下 那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上 这时候我们最直接的思维就是想到下面这种: 但是,试过的会发现用vue-router重新路由到当前页面,页面是不进行刷新的,根本

Vue单页面在ios10系统上出现白屏的bug

一个bug 你用Vue做了一个单页面应用,它在一切设备上都工作正常,但是突然有一天,你的测试和你说,这个网站在iOS 10上跑不起来,怎么办? 于是你打开你电脑上的Chrome浏览器,工作正常:打开Safari浏览器,工作正常:打开iOS 11手机,工作正常:打开各种安卓手机,工作正常.但是在iOS 10的手机上,不论是微信浏览器,还是Safari浏览器,都只能看见一个白白的屏幕. 于是你把手机连上电脑,在电脑端的Safari里,看到了如下的错误: SyntaxError: Cannot dec

Web端控件,页面传值

一.记忆Web端控件需要配合HTML 中的Form表单元素 Label - 在HTML中被编译成<span> Literal - 在HTML中被编译成空 文本类 文本框      <input type="text">                        TextBox 密码框      <input type="password">                 TextBox 属性TextMode="pa

页面静态化用memcache的思想去实现,会是什么效果那??

最近因为之前的项目需要,需要对一个PHP项目进行优化,优化之余,突然想尝试着用memcache去实现页面静态化的思想会不会有效果那? 页面静态话其实就是在访问一个页面的时候,由于这个页面很少会发生变化,就可以考虑将这个页面生成一个静态的html保存起来,当再次访问的时候直接访问的是静态的html,这样的话会使网站的响应速度大幅度的提高,对整个网站的并发以及性能起到了优化作用. 动态生成html需要用到php的ob_start()   .ob_get_contents()函数,其实这个过程就是将解

基于VUE选择上传图片并在页面显示(图片可删除)

demo例子: 依赖文件 : http://files.cnblogs.com/files/zhengweijie/jquery.form.rar HTML文本内容: <template> <div id="accident"> <div class="wrapper"> <i class="icon-pic"></i>相关照片 <button type="button&