移動端最強適配（rem適配之px2rem）&& 移動端結合Vuex實現簡單loading加載效果

1、rem之px2rem適配

前言：相信許多小夥伴上手移動端時面對各式各樣的適配方案，挑選出一個本身以爲簡便、實用、高效的適配方案是件很糾結的事情。 深有體會...

通過多個移動端項目從最初的 viewport --> 百分比 --> rem --> rem的升級版px2rem可謂是一把鼻涕一把淚啊 ，在px2rem以前總以爲以前的不夠完美或者麻煩；

進入正題： 首先 px2rem 也是基於 rem  適配的，可是他的好用之處在於靈活、簡便、高效不用咱們本身去換算、px2rem-loader  會幫咱們換算轉換成rem適配各類機型； 

一、安裝 px2rem-loader  (webpack構建的項目)

npm i px2rem-loader --save-dev

二、（build/utils.js文件）配置 px2rem-loader

// utils.js
const 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 這個用作轉換複製代碼

 2、結合Vuex自定義loading組件

這裏只說如何實現，具體的vuex怎麼使用註冊請看以往博文 www.cnblogs.com/ljx20180807…

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 loading
        this.showHttpLoading = val
      }
    }
  }
</script>

在哪裏調用呢；我項目是在全部請求的時候和路由跳轉的時候調用；請求成功則關閉loading；具體效果可根據你公司需求確認

// config.js
import 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) {
    // 觸發loading
    store.commit('UPDATE_SHOW_HTTP_LOADING', true)
    .......
  }, function (err) {
    // 拋出錯誤
    store.commit('UPDATE_SHOW_HTTP_LOADING', false)
    .....
  })

  // 響應攔截器 Add a response interceptor
  axios.interceptors.response.use(function (response) {
    // 請求成功關閉loading
    store.commit('UPDATE_SHOW_HTTP_LOADING', false)
    .........
  }, function (error) {
    store.commit('UPDATE_SHOW_HTTP_LOADING', false)
    .......
  })

  // 前置守衛  只爲觸發loading效果以爲不須要則去掉
  router.beforeEach((to, from, next) => {
    if (to.matched && to.matched.length && to.matched[0].path) {
      // 已受權狀況   觸發loading
      store.commit('UPDATE_SHOW_HTTP_LOADING', true)
      next()
    }
  })

  // 後置守衛  只爲關閉loading  不用loading則去掉
  router.afterEach((to, from) => {
    // 關閉loading
    store.commit('UPDATE_SHOW_HTTP_LOADING', false)
  })

注意的是須要在main.js 裏引入config.js 並初始化去 config.init()

效果圖不存在卡頓，看起來稍微有些卡頓是錄製gif圖工具的緣由。

 

結語： 以上就是今天要分享的內容了，有問題歡迎留言