移动端应用一些问题及解决办法

1.fastclick-解决移动端点击300ms的延迟

• 安装fastclick

  npm install fastclick --save
  

• 导入fastclick->Main.js

  import FastClick from 'fastclick';
  

• 使用fastclick

  FastClick.attach(document.body);
  

2.vue-lazyload-图片懒加载

• 安装vue-lazyload

  npm install vue-lazyload --save
  

• 导入vue-lazyload->Main.js

  import VueLazyLoad from 'vue-lazyload';
  

• 安装插件vue-lazyload

  Vue.use(VueLazyLoad,{
    loading:require('placeholder图片地址')
  });
  

• 使用vue-lazyload

  //修改src指令为v-lazy
  <img v-lazy='imageUrl'/>
  

3.使用css-px2vw 单位转化插件

• 安装postcss-px-to-viewport

  npm i postcss-px-to-viewport --save-dev
  

• 在一级目录中新建postcss.config.js,然后在文件中添加以下代码

   module.exports = {
          plugins: {
            autoprefixer: {},
            "postcss-px-to-viewport": {
              //以iphone6的尺寸设计（750*1334）->（375*667）
              viewportWidth: 375, //视口的宽度，对应的时设计稿的宽度/2，一般为750
              viewportHeight: 667, //视口的高度，对应的是设计稿的高度（也可以不配置）
              unitPrecision: 5, //指定‘px’转换为视口单位值的小数位数（很多时候无法整除）
              viewportUnit: 'vw', //指定需要转换成的视口单位，建议使用vw
              selectorBlankList: ['ignore','tab-bar'], //指定不需要转换的类
              minPixelValue: 1, //小于或等于‘1px’不转换为视口单位
              mediaQuery: false,//允许在媒体查询中转换为‘px’
              exclude:[/Tabbar/]  //不需要转化的组件文件名正则，必须是正则表达式
            }
          }
   }