精华内容
下载资源
问答
  • 前段时间呢实现了一个模仿移动端app的通过滑动切换路由/tab的效果,详见vuejs实现spa页面组件滑动特效。完了之后呢就在想能不能做成一个组件的形式,改进一下,抽离出来,顺便再发布到npm上,不是美滋滋?这两天...

    前言

    前段时间呢实现了一个模仿移动端app的通过滑动来切换路由/tab的效果,详见vuejs实现spa页面组件滑动特效。完了之后呢就在想能不能做成一个组件的形式,改进一下,抽离出来,顺便再发布到npm上,不是美滋滋?这两天正好有时间,就把它写出来了,我给他起名叫tab-slider,中间遇到一些坑,分享一蛤。

    正文

    简单介绍

    正如我上一篇文章所说,如果你需要这种功能

    1. 即将离开的组件和将要进入的组合需要同时出现在页面中
    2. 用手指拖动页面可以切换路由,而不仅仅是点击链接跳转
    3. 结合以上两点,拖动过程中同时显示两个组件,手指离开屏幕后执行切换路由或者返回的动作

    tab-slider也许可以满足你,具体实现思路可以去看上一篇文章,这里就不讲了,来看一下效果图:
    预期效果

    改进方面

    • 相比之前每个路由组件都要写touch事件的蠢写法,我把touch事件写在了router-view上,增强了代码的复用,事实上不这么改我也没法将组件抽离出来给别人用
    • 支持多个tab切换,之前是只有2个,写法固定,现在可以有任意个tab切换。

    踩过的坑

    在我开发XiXi这个仿DiDi app项目的时,我使用的Vue版本是2.4.4,而我写tab-slider的时候使用了最新版本的Vue 2.5.16。写完之后我遇到了一个问题,滑动完毕切换路由的时候,router-view所对应的区域会闪一下,而通过点击router-link切换路由则不会。
    Vue2.5.16效果图:
    实际效果

    where?哪有问题?

    这里一开始我觉得可能是新老项目css样式做了部分更改,影响了浏览器的重绘或是回流,苦苦搜寻无果。后来通过chrome控制台的的performance发现:新版本的vue多了个flushCallbacksactivity,耗时9ms。这是什么?继续google,没什么有用的东西,ok没关系,去Vue仓库里搜,发现他第一次写入是在14 Oct 2017,也就是Vue2.5.2发布的时候,这个版本修改了nextTick实现机制,并关闭了一个issue,有兴趣的同学可以看看。这个issue下面呢又有人reference了这个issue,里面正好讲解了相关内容。开源社区简直棒极了!

    why?问题是什么?

    简单来说呢就是新版Vue对于DOM相关事件是放在macro task里,其他情况默认走micro task,而micro task要先于macro task执行。而我项目中的写法是,对拖曳的dom监听了transitionend事件,当transition结束后进行路由切换。所以原因应该是滑动结束后(也就是transition结束),路由没有在第一时间进行跳转,所以出现了一瞬间的“白屏”,在我们看来就是闪了一下。

    how?怎么解决?

    • solution1: 使用低版本Vue,2.4.4及以下。
    • solution2: 修改写法,直接使用settimeout,延迟时间与动画时间一致,而由于js的异步机制,实际延迟时间总是略大于写入的延迟时间,基本上能达到想要的效果。

    这里我采用了solution2,毕竟是写出来给人用了,总要有个通用的解决方案。

    另外个坑就是在发布到npm之后,引入我的包,没法正常使用,提示组件未注册,折腾了许久,参考了vantcube-ui的组件导出方式,却一直没能成功导出正确的对象。最后发现原因在于webpack的配置上: 需要在output属性中添加library以及libraryTarget,这样才能正确导出对象。

    怎么用

    说了那么多废话,这组件怎么用?

    • 安装:npm i -S tab-slider
    • main.js中引入样式,import 'tab-slider/dist/index.css'
    • 在需要的组件中注册子组件,import TabSlider from 'tab-slider',也可以在main.js中引入,并通过Vue.use()来使之成为一个全局组件。
    • 接受一个comp的prop,类型是数组,数组中的每一项是对象,对象中又包含了namecomponent属性。其中name属性必须和路由名字相同,(这也意味着你必须为每个路由取名),component则是对应的组件。这里要注意一下,comp中每一项的顺序需要与你的router-link顺序一一对应。
    • 还接受一个default-index,表示默认跳转的路由,从0开始。

    可以改进的地方

    • webpack相关配置还是通过vue-cli生成的,删除了一些不必要的东西,但还是没有做到最简。打包出来的东西也有9kb,好像有点大的过分。
    • 可以把router-link的内容也直接做进去,毕竟tab和内容区是紧密联系的。
    • 提供更多的选项(prop)给使用者。

    么得了

    如果对你有帮助的话点个赞点个收藏点个star提个issue都是可以的哦 仓库地址

    展开全文
  • vue 切换路由左右滑动动画

    千次阅读 2018-10-12 09:24:09
    前言:在vue切换页面路由时是没有任何动画效果的,所以到网上找了下如何实现类似于原生App那样的左右滑动动画,总结了下大致有几种方法,各有优缺点。 一. 在vue-router原型上挂载goBack方法 这个方法网上是最多...

    前言:在vue中切换页面路由时是没有任何动画效果的,所以到网上找了下如何实现类似于原生App那样的左右滑动动画,总结了下大致有几种方法,各有优缺点。

    一. 在vue-router原型上挂载goBack方法

    这个方法网上是最多的,但是我试了并没有生效,先记录下来吧

    1.首先在router文件夹下的index.js中定义goBack方法

    import Router from 'vue-router'
    
    Vue.use(Router)
    Router.prototype.goBack = function () {
      this.isBack = true   //判断是否是返回操作
      window.history.go(-1)
    }
    复制代码

    2.在App.vue中动态绑定路由动画

     <transition :name="transitionName">
        <router-view class="child-view"></router-view>
     </transition>
     
     //在路由发生变化时监听是前进还是后退状态,应用不同动画
     watch: {
       '$route' (to, from){
          let isBack = this.$router.isBack; 
          
          if(isBack) {
            this.transitionName = 'slide-right'
          } else {
            this.transitionName = 'slide-left'
          }
          this.$router.isBack = false
        }
      }
    复制代码

    3.前进后退动画

    .child-view {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
    }
    .slide-left-enter,
    .slide-right-leave-active {
      opacity: 0;
      -webkit-transform: translate(50px, 0);
      transform: translate(50px, 0);
    }
    .slide-left-leave-active,
    .slide-right-enter {
      opacity: 0;
      -webkit-transform: translate(-50px, 0);
      transform: translate(-50px, 0);
    }
    复制代码

    4.在需要后退动画的路由上调用goBack方法

    this.$router.goBack()
    复制代码

    最后,不知道是不是调用有问题,一直不生效,也没找到是什么原因。以后如果解决了这个问题再来补充。下面来说第二种方法,这个效果是实现了的,相对来说也比较简单。

    二. 在路由中使用meta对象定义当前层级

    1.在路由配置中加一个meta对象,index代表当前路由的层级,由高层级跳转到底层级则视为返回,相反视为前进。

    export default new Router({
      routes: [{
          path: '/',
          name: 'Home',
          meta:{index:0},
          component: Home
        },
        {
          path: '/category',
          name: 'Category',
          meta:{index:1},
          component: Category
        },
        {
          path: '/shopcart',
          name: 'Shopcart',
          meta:{index:2},
          component: Shopcart
        }
      ]
    })
    复制代码

    2.设置路由动画,与第一种方法相同

    3.监听路由变化,比较层级索引,如果to索引大于from索引,判断为前进状态,反之则为后退状态

    watch: {
       '$route'(to, from) {
           if(to.meta.index > from.meta.index){
            this.transitionName = 'slide-left';
           }else{
            this.transitionName = 'slide-right';
           }
        }
      }
    复制代码

    4.设置前进后退动画,也与第一种方法相同

    这样,就可以自己定义层级,实现动态切换路由动画效果啦。

    三. 使用vuex,给路由增加索引存到seesionStorage中

    据说这个是由移动端框架vux的源码改编的

    1.App.vue中给路由添加动画效果

    <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
          <keep-alive>
          <router-view class="router-view" ></router-view>
          </keep-alive>
    </transition>
    复制代码

    用vuex存储状态

    import { mapState } from 'vuex'
    computed:{
        ...mapState({
        direction: state => state.mutations.direction
        })
    }
    
    复制代码

    设置转场动画样式

    <style scoped>
     .vux-pop-out-enter-active,
      .vux-pop-out-leave-active,
      .vux-pop-in-enter-active,
      .vux-pop-in-leave-active {
        will-change: transform;
        transition: all 250ms;
        height: 100%;
        top: 0;
        position: absolute;
        backface-visibility: hidden;
        perspective: 1000;
      }
    
      .vux-pop-out-enter {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
      }
    
      .vux-pop-out-leave-active {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
      }
    
      .vux-pop-in-enter {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
      }
    
      .vux-pop-in-leave-active {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
      }
    </style>
    复制代码

    在main.js中给路由增加索引,存到sessionStorage里,以点击过的索引值不变,新增加的路由,索引增加1,同时count+1,这样在页面切换时通过比较索引值的大小,大的向右小的向左,做到左右有规律的过渡。

    const history = window.sessionStorage;
    history.clear()
    let historyCount = history.getItem('count') * 1 || 0;
    history.setItem('/', 0);
    
    router.beforeEach(function (to, from, next) {
    
      const toIndex = history.getItem(to.path);
      const fromIndex = history.getItem(from.path);
    
      if (toIndex) {
        if (!fromIndex || parseInt(toIndex, 10) > parseInt(fromIndex, 10) || (toIndex === '0' && fromIndex === '0')) {
          store.commit('UPDATE_DIRECTION', {direction: 'forward'})
        } else {
          store.commit('UPDATE_DIRECTION', {direction: 'reverse'})
        }
      } else {
        ++historyCount;
        history.setItem('count', historyCount);
        to.path !== '/' && history.setItem(to.path, historyCount);
        store.commit('UPDATE_DIRECTION', {direction: 'forward'})
      }
        next()
    });
    复制代码

    store/mutation.js

    const state = {
      direction: 'forward',
    };
    复制代码

    原文链接:www.jianshu.com/p/a29d5ecfa…

    转载于:https://juejin.im/post/5bbef2e16fb9a05cdc49ab4b

    展开全文
  • Vue已广泛运用于移动开发,页面间切换路由过渡效果有很多方法实现,这里讲的是较简单粗暴的方法,便于理解实现原理。 1. 为需要路由过渡的部分添加<transition></transition>,声明过渡。 <...

    此博文默认你已掌握入门的路由过渡知识,若有无法理解之处请自行补充相关知识或浏览我的下一篇博文…

    Vue已广泛运用于移动开发,页面间切换的路由过渡效果有很多方法实现,这里讲的是较简单粗暴的方法,便于理解实现原理。

    1. 为需要路由过渡的部分添加<transition></transition>,声明过渡。

    <transition :name="transitionName">
    	<router-view class="transitionBody"></router-view>
    </transition>
    
    data () {
        return {
          transitionName: 'transitionLeft',
        }
    },
    

    绑定name属性用于后面判断选择不同的左滑或右滑过渡。

    2. 书写过渡css样式。
    transitionBody类:规定全部样式以0.4秒的时间和ease-out的速度进行过渡动画;
    transitionLeft:左滑的过渡周期类名;
    transitionRight:右滑的过渡周期类名;
    注意:最好是为左滑和右滑的enter-active类添加绝对定位,并上下左右给个0,这一步是为了滑动时防止页面因为来不及加载数据而导致部分元素位置大幅度抖动,影响体验感和美观。

    .transitionBody{
     transition: all 0.4s ease-out;
    }
    .transitionLeft-enter,
    .transitionRight-leave-active {
      -webkit-transform: translate(100%, 0);
      transform: translate(100%, 0);
    }
    .transitionLeft-leave-active,
    .transitionRight-enter {
      -webkit-transform: translate(-100%, 0);
      transform: translate(-100%, 0);
    }
    .transitionLeft-enter-active,
    .transitionRight-enter-active {  //防止过渡时元素抖动
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
    }
    

    3. watch监听当前路由的层级,判断决定采用左滑或右滑的过渡类。
    这一步是实现整个功能的核心。将需要过渡动画的页面路由路径保存为一个数组,通过监听路由的from路径和to路径,判断路由在数组中的index级别大小,实时更改transitonname属性,从而决定是左滑或右滑。

     watch: {
        '$route'(to, from) {
            const arr = ['/shop-order', '/driver-info', '/shop-info', '/shopOrder-detail', '/change-password']
            this.transitionName = arr.indexOf(to.path) > arr.indexOf(from.path) ? 'transitionLeft' : 'transitionRight'
        }
    }
    

    到此为止,已经能够实现路由切换平滑顺畅地左右滑动过渡效果。通过这个简单粗暴的数组方法我们不难理解,实现这个效果的核心在于如何判断当前路由和目的路由的层级大小关系,从而决定当前过渡采用前进或后退。
    大家若有其他方法或判断方式可评论交流,后面我也会慢慢更新实现该效果的其他方式~

    展开全文
  • 在 app.vue文件中设置 HTML代码 <transition :name="transitionName"> <router-view class="transitionBody"></router-view> </transition> JS代码 //设置动态name data () { return { ...

    在 app.vue文件中设置
    HTML代码

    <transition :name="transitionName">
    	<router-view class="transitionBody"></router-view>
    </transition>
    

    JS代码

    //设置动态name
    data () {
        return {
          transitionName: 'transitionLeft',
        }
    },
    //控制左右滑动
     watch: {
        '$route'(to, from) {
            const arr = ['/shop-order', '/driver-info', '/shop-info', '/shopOrder-detail', '/change-password']
            this.transitionName = arr.indexOf(to.path) > arr.indexOf(from.path) ? 'transitionLeft' : 'transitionRight'
        }
    }
    

    //样式代码

    .transitionBody{
     transition: all 0.4s ease-out;  //设置动画
    }
    .transitionLeft-enter,
    .transitionRight-leave-active {
      -webkit-transform: translate(100%, 0);
      transform: translate(100%, 0); 
    }
    .transitionLeft-leave-active,
    .transitionRight-enter {
      -webkit-transform: translate(-100%, 0);
      transform: translate(-100%, 0);
    }
    .transitionLeft-enter-active,
    .transitionRight-enter-active {  //防止过渡时元素抖动
      position: absolute;
      top: 0; 
      right: 0;
      left: 0;
      bottom: 0;
    }
    
    展开全文
  • 主要介绍了Vue路由切换时的左滑和右滑效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 手机左右滑动切换导航 以维修记录为例,当页面偏移50px而且手离开屏幕时,路由相应切换 var router = this.$router; this.$refs.maintain.addEventListener('touchstart', (e) =&gt; { this.startX = e....
  • <template> <div id="headed"> <ul class="tab"> <li> <!-- @click="jump(index) index: 切换颜色 代表切换路由文件 ...
  • 我想在红圈位置 切换时加入动画 我的app.vue <template> <div id="app"> <!-- 路由出口 --> <router-view/> </div> </template> 我的router.js 我用了3级路由 { path: '/...
  • vant
  • 今天我要探讨是如何做到像微信那样的滑动切换tab,既能左右滑动切换,又能上下滑动一个页面而不影响其他页面的滚动位置。如果用ui组件的话,子页面都是在一个div里面的,虽然可以做到左右滑动,但是只要有一个页面...
  • 实现路由类 Tab 左右滑动切换的效果 先说下 transition 为什么可以让你定义了 v-enter, v-enter-active 之后就可以触发transition.实际过程按我的理解应该是这样: 最开始的时候, 先给元素加上了 v-enter, v-enter-...
  • IOS 上滑动切换时,会有两次页面的转场动画,一次自身滑动时进行的切换,随后触发我们设置的转场动画。 除了上面两个问题,其余的操作都是可以在页面内进行设置,基本都是可控的。主要就是解决上面两个问题。 可以...
  • Vue路由切换过渡 vue的过渡 使用transition 包裹需要过渡的组件, 或者是一个div, 或者是一个路由, 当这个创建或者销毁的时候, 会加载指定的动画效果, 这个动画效果需要自己指定, 这里指定的是transitionName 然后...
  • Vue页面切换滑动效果

    千次阅读 2018-11-01 17:49:27
    试着用Vue做了个页面切换滑动的效果,如下示例 源码 https://github.com/Aiden1204/VueAnimateDemo 这里使用了Vue的transition组件,具体可见文档 https://cn.vuejs.org/v2/guide/transitions.html 直接看...
  • vue切换到新路由时,让页面滚到顶部一、scrollBehavior是什么?二、使用在路由文件中加上scrollBehavior 一、scrollBehavior是什么? 当切换到新路由时,想要页面滚到顶部就可以使用vue-router中的滚动行为。 二...
  • vue中使用vue-awesome-swiper做轮播 ,手动滑动vue-router路由跳转,导致自动轮播失效问题前言问题一:手动滑动后,自动轮播失效问题二:vue-router路由跳转后再回到轮播图页面 前言 在做vue项目中使用vue-...
  • 本文实例为大家分享了Vue.js路由实现选项卡的具体代码,供大家参考,具体内容如下 需要实现下图效果,点击上方选项卡,切换到不同内容的组件: 事先准备好两个库文件(vue.js、vue-router.js),放到对应路径。 1....
  • vue页面切换动画

    2020-04-15 15:45:13
    VUE学习笔记vue基本语法整理条件渲染列表渲染vue 路由vue路由切换动画 vue基本语法整理 条件渲染 列表渲染 vue 路由 vue路由切换动画 vue路由切换动画,是基于vue的过渡动画效果做的。 这里需要解决2个问题: 1.监听...
  • IOS 上滑动切换时,会有两次页面的转场动画,一次自身滑动时进行的切换,随后触发我们设置的转场动画。 除了上面两个问题,其余的操作都是可以在页面内进行设置,基本都是可控的。主要就是解决上面两个问题。 可以...
  • 使用vue切换页面的时候,发现右侧的滚动条的位置似乎存在缓存似的,当右侧滚动条默认在顶部,切换页面的时候,位置停留在顶部,但当右侧滚动条的停留位置不是在顶部的时候,右侧滚动条停留的位置就会是上一个页面...
  • 在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1、当页面整体都要滚动到顶部的情况 router.afterEach(() => { document.body.scrollTop ...
  • 实现原生app页面切换动画。前进左滑后退右滑,同级tab切换无动画   二、分析 1、如何判断页面是前进还是后退? 2、如何在前进后退时使用不同的动画?   三、思路 1、为每个页面定义一个变量来表示当前所在...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,492
精华内容 596
关键字:

vue滑动切换路由

vue 订阅