一、rem之px2rem适配
前言：相信许多小伙伴上手移动端时面对各式各样的适配方案，挑选出一个自己觉得简便、实用、高效的适配方案是件很纠结的事情。 深有体会...
经过多个移动端项目从最初的 viewport --> 百分比 --> rem --> rem的升级版px2rem可谓是一把鼻涕一把泪啊 ，在px2rem之前总觉得之前的不够完美或者麻烦；
进入正题： 首先px2rem 也是基于 rem 适配的，但是他的好用之处在于灵活、简便、高效不用我们自己去换算、px2rem-loader 会帮我们换算转换成rem适配各种机型；
1、安装px2rem-loader (webpack构建的项目)
npm i px2rem-loader --save-dev
2、（build/utils.js文件）配置 px2rem-loader
// utils.jsconst cssLoader = {loader: 'css-loader',options: {sourceMap: options.sourceMap}}/* px2rem */const px2remLoader = {loader: 'px2rem-loader',options: {remUnit: 75 // 设计稿宽度/10 remUnit的值自定义多少都无所谓，最终都会转换成相应的rem 设计稿参照iphone的话推荐75 或者100}};/* 添加到loaders数组中 */function generateLoaders(loader, loaderOptions) {const loaders = [cssLoader, px2remLoader]}
用法： 标注图即量即所得；设计稿量多少就可以写多少了；最终显示时 px2remLoader会转换成相应的 rem
代码： font-size: 40px;浏览器控制台： font-size: 0.533333rem; 即 40/75 因为上面写的是75复制代码
完全不用自己去转换了！爽多了
小坑：当 border 或者 height 为1px时 你会发现最终转换下页面看不到了 ；解决如下
border: 1px solid #e6e6e6; /*no*/ 后面加个注释 /*no*/ 目的是告诉 px2remLoader 这个用做转换复制代码
二、结合Vuex自定义loading组件
这里只说如何实现，具体的vuex怎么使用注册请看以往博文/ljx0807…
loading.vue
<template><!--loading--><div class="comp-loading"><div class="comp-loading-box"><img src="@/assets/img/loading.png"/><p>Loading...</p></div></div></template><style lang="stylus" rel="stylesheet/stylus" scoped>.comp-loading {&-box {z-index: 10000;position: fixed;top: 40%;left: 50%;width: 160px;margin-left: -80px;padding: 30px 0;border-radius: 10px;background-color: rgba(0,0,0,.7);img {display: block;width: 60px;height: 60px;margin: 0 auto;animation: comp-loading-spin 1200ms infinite linear;}p {font-size: 26px;color: #fff;text-align: center;line-height: 26px;padding-top: 14px;}}}@keyframes comp-loading-spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}</style>
App.vue
<template><!-- App.vue --><div id="app"><!--loading--><Loading v-show="showHttpLoading"></Loading><router-view v-wechat-title="$route.meta.title"></router-view></div></template><script>import Loading from './components/loading'import error from './services/error'export default {name: 'App',data () {return {showHttpLoading: false}},components: {Loading},watch: {// 监听 showHttpLoading 触发loading效果'$store.state.showHttpLoading' (val) {// set loadingthis.showHttpLoading = val}}}</script>
在哪里调用呢；我项目是在所有请求的时候和路由跳转的时候调用；请求成功则关闭loading；具体效果可根据你公司需求确认
// config.jsimport Vue from 'vue'import axios from 'axios'import store from '../store'import router from '../router/index'import { Toast } from 'cube-ui'Vue.use(Toast)const init = function () {// 请求拦截器axios.interceptors.request.use(function (config) {// 触发mit('UPDATE_SHOW_HTTP_LOADING', true).......}, function (err) {// 抛出错误mit('UPDATE_SHOW_HTTP_LOADING', false).....})// 响应拦截器 Add a response interceptoraxios.interceptors.response.use(function (response) {// 请求成功关闭mit('UPDATE_SHOW_HTTP_LOADING', false).........}, function (error) {mit('UPDATE_SHOW_HTTP_LOADING', false).......})// 前置守卫 只为触发loading效果觉得不需要则去掉router.beforeEach((to, from, next) => {if (to.matched && to.matched.length && to.matched[0].path) {// 已授权情况 触发mit('UPDATE_SHOW_HTTP_LOADING', true)next()}})// 后置守卫 只为关闭loading 不用loading则去掉router.afterEach((to, from) => {// 关闭mit('UPDATE_SHOW_HTTP_LOADING', false)})
注意的是需要在main.js 里引入config.js 并初始化去config.init()
效果图不存在卡顿，看起来稍微有些卡顿是录制gif图工具的原因。
结语： 以上就是今天要分享的内容了，有问题欢迎留言
