四. Vue中的切换动画

Posted on

1. 动画的控制以及切换

1
2
3
4
5
<mt-header fixed title="松鼠商城">
     <a href="#" v-if="flag" slot="left">
       <mt-button icon="back" @click="goBack">返回</mt-button>
     </a>
   </mt-header>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
watch: {
    //控制返回按钮是否需要显示的
    "$route.path": function(newVal, oldVal) {
      if (
        newVal == "/" ||
        newVal == "/member" ||
        newVal == "/cart" ||
        newVal == "/search"
      ) {
        this.flag = false;
      } else {
        this.flag = true;
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//监听路由变化,控制动画的
    $route(to, from) {
      //定义一个数组，用来规定在什么时候不需要动画的切换
      var arr = ["/", "/mumber", "/cart", "/search"];
      let isBack = this.isBack;

      //如果用户点击了返回按钮，此时用slide-right动画
      if (this.isBack == true) {
        this.transitionName = "slide-right";
      }
      //如果用户没有点击返回按钮
      else {
        //当路由的出发点和目标点在arr数组中，此时不需要动画
        if (arr.includes(to.path) && arr.includes(from.path)) {
          this.transitionName = "";
        }
        //当路由不是在'/','/member','/cart','/search' 这些之间跳转的时候，需要slide-left动画
        else {
          this.transitionName = "slide-left";
        }
      }
      //重置动画的默认状态
      this.isBack = false;
    }
  },
1
2
3
4
5
6
7
methods: {
    //当我们点击返回按钮的时候，修改isBack为true
    goBack() {
      this.isBack = true;
      this.$router.go(-1);
    }
  }

2. 路由的懒加载

1
2
3
4
5
6
7
const Home = () => import('./views/Home.vue')
const Member = () => import('./views/Member.vue')
const Cart = () => import('./views/Cart.vue')

//可以发现变化如下：
//1.打包后的bundle.js文件体积小了
//2.只有打开某个路由之后才会执行该路由对应的组件中的js代码

3. 按需加载 vue/cli中的按需导入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
在使用vue/cli脚手架的项目中要实现按需导入：
1.删除babel.config.js文件
2.在项目根目录下创建.babelrc文件
{
    "presets": ["@vue/app", ["@babel/preset-env", { "modules": false }]],
    "plugins": [
      [
        "component",
        {
            "libraryName": "mint-ui",
            "style": true
        }
      ]
    ]
}
3.安装  npm install babel-plugin-component -D  插件

4. 移动端的适配问题

1
2
3
4
5
6
7
8
//1.安装flexible。 flexible主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题
npm install lib-flexible --save

//2.main.js引入flexible
import 'lib-flexible'

//此时运行程序会看到html中自动加上了font-size    font-size的默认值为viewport的十分之一
//在页面中引入flexible.js后，flexible会在<html>标签上增加一个data-dpr属性和font-size样式（如下图）。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//1.安装postcss-pxtorem
npm install postcss-pxtorem --save-dev

//2.修改postcss.config.js
module.exports = {
  plugins: {
    //autoprefixer 自动补全css前缀的东西
    'autoprefixer': {
      //兼容的机型
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5, //换算基数，一般和html的font-size一致
      propList: ['*']  //哪些css属性需要换算
    }
  }
};
// 以37.5位基准,如下图的1.6rem 就是 60px
1
2
3
4
5
mui-grid-view.mui-grid-9 img[data-v-fae5bece] {

    width: 1.6rem;
    height: 1.6rem;
}

5. 断点的调试

1
2
config.devtool = '#cheap-module-eval-source-map'
再在需要的地方加上 debugger