美文网首页Vue.jsJavaScript 进阶营
vue2监听微信返回按钮仿微信切换动画

vue2监听微信返回按钮仿微信切换动画

作者: 宇cccc | 来源:发表于2017-05-20 16:53 被阅读149次

效果如下


GIF.gif

点击了浏览器默认返回按钮执行后退动画 其他执行前进动画
大致思路如下:
在vue中实现动画其实是很简单的,但是由于网上查找不到相关的浏览器默认返回按钮或者微信的返回按钮事件,所有只能是一个伪的监测返回事件
代码如下:

  • 首先是先定义css动画 感谢vux的源码 我是一顿复制粘贴
    app.vue 文件
  .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);
    -webkit-transform: translate3d(100%, 0, 0);
  }

  .vux-pop-in-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
  }
  • 定义动画执行组件 此处的name应该是动态改变的
    app.vue 文件
   <transition :name="'vux-pop-'+ animate">
     <router-view class="router-view"></router-view>
   </transition>
  • 定义name的值 那么此时我们需要用到vuex 如果你用其他也可以 个人习惯用vuex
    main.js 文件
const store = new Vuex.Store({});//也许这里你已经有其他vuex模块
store.registerModule('vux', { // 名字自己定义
  state: {
    animate: 'in',      // 动画状态  默认是进入
  },
  mutations: {   // 提交状态
    animateChange(state, payload){
      state.animate = payload.animate
    }
  }
});
  • 重点来了 改变animate的状态 我们需要监测路由的状态
    main.js 文件
var routerArr = [];//  创建一个存储路由数组
router.beforeEach(function (to, from, next) {
  routerArr.push(to.path);//每次push路由
  if (routerArr[routerArr.length - 3] === to.path) {// 当如果要去的路径等于数组的倒数第二个路由 那么就是点        击了后退
    store.commit('animateChange', {
      animate: 'out' // 变成后退动画
    });
    routerArr.splice(routerArr.length - 2, 2) // 必须删除数组的倒数两位字符串
  } else {
    store.commit('animateChange', {
      animate: 'in' // 变成前进动画
    });
  }
}

这么做的话就可以实现切换的效果了 但是存在刷新数组被情况的情况 改成存在sessionStorage 里面就可以

  • 最后拿到 animate 状态
    app.vue 文件
  import {mapState} from 'vuex' 
    computed: {
      ...mapState({
        animate: state => state.vux.animate // 拿到状态
      })
    }

也许有更好的解决办法 目前只能这么实现了
项目地址 https://github.com/yucccc/vue-vote

相关文章

  • vue2监听微信返回按钮仿微信切换动画

    效果如下 点击了浏览器默认返回按钮执行后退动画 其他执行前进动画大致思路如下:在vue中实现动画其实是很简单的,但...

  • 监听微信返回按钮

    利用HTML5的window.history.pushState特性,例如 当从A页面进入时,先判断window....

  • 仿微信切换按钮

    因安卓自带的Switch不符合UI风格,所以应要求做一个类似微信的开关,颜色支持自定义。 自定义完后,不算复杂,主...

  • 仿微信切换按钮

    因安卓自带的Switch不符合UI风格,所以应要求做一个类似微信的开关,颜色支持自定义。 自定义完后,不算复杂,主...

  • 微信端返回按钮监听处理

    微信端监听‘返回’事件 下面的方法是在移动端实现的,在微信的浏览器中beforeunload等是被阉割掉的,所以用...

  • 微信浏览器左上角返回按钮的监听

    点击微信浏览器左上角返回按钮,指定跳到对应的页面 点击微信浏览器左上角返回按钮,关闭当前页面返回到微信公众号

  • iOS条形码动画

    WeiXinBarCodeImitate 是仿微信支付条形码的切换动画,包含条形码的生成、截图、旋转动画。gith...

  • 记微信网页开发单页面返回不刷新的实现

    需求 在微信网页开发中,点击返回按钮不刷新页面,进行页面切换,且实现'传值'功能. 问题由来 在做微信网页开发时,...

  • 微信小程序的返回按钮监听

    目前小程序本身还没有做到监听左上角返回的事件,它的机制现在与浏览器类似。 但是,可以换一种思路,如下: 通过web...

  • uniapp中微信授权登录

    该开始微信授权登录可以,后来又不行了,点击微信授权登录没有反应,在设置微信登录的按钮中添加 微信授权登录 监听 g...

网友评论

    本文标题:vue2监听微信返回按钮仿微信切换动画

    本文链接:https://www.haomeiwen.com/subject/dfpyxxtx.html