Public account: wechat search front end tool person; Take more dry goods

One, REM PX2REM adaptation

1. I believe that many friends are faced with a variety of adaptation schemes when they get to the mobile terminal. It is very difficult to choose a simple, practical and efficient adaptation scheme. Have a deep experience…

2, after several mobile terminal projects from the initial viewport –> percentage –> REM –> REM upgrade version PX2REM is a pit step by step, before PX2REM always feel that the previous is not perfect or trouble;

Two, get to the point

Enter the topic: first of all pX2REM is also based on REM adaptation, but his good use lies in the flexible, simple, efficient we do not have to convert, PX2REM-Loader will help us convert into REM adaptation of various models;

1, install,px2rem-loader (webpackBuilt projects)

npm i px2rem-loader --save-dev

or

yarn add px2rem-loader

Copy the code

2, installation,lib-flexible(Mobile adaptive)

npm i lib-flexible --save-dev

or

yarn add lib-flexible

Copy the code

3,main.jsThe introduction oflib-flexible

import 'lib-flexible'

Copy the code

4,Htmlconfigurationviewprot

<meta name="viewport" content="Width = device - width, initial - scale = 1, the user - scalable = 0, minimum - scale = 1.0, the maximum scale of = = 1.0">

Copy the code

5,build/utils.jsConfiguration filepx2rem-loader

// utils.js

const cssLoader = {

  loader: 'css-loader'.

  options: {

    sourceMap: options.sourceMap

  }

}



/*  px2rem */

const px2remLoader = {

  loader: 'px2rem-loader'.

  options: {

It doesn't matter how much custom remUnit gets, but it saves for the appropriate REM design that saves for 75 or 100, according to iPhone recommendations

  }

};



/* Adds to the loaders array */

function generateLoaders(loader, loaderOptions) {

    const loaders = [cssLoader, px2remLoader]

}

Copy the code

Usage: Annotated map is quantity is gain; How much design can be written; Font-size: 40px; Font-size: 0.533333rem; So 40/75 because it says 75

You don’t have to do it yourself! Much more comfortable

6, small pit: when the border or height is 1px you will find that the final page is not visible after conversion; To solve the following

// Add a comment /*no*/ to tell px2remLoader that no conversion is required

border: 1px solid #e6e6e6; /*no*/

Copy the code

Third, combined withVuexThe customloadingcomponent

I said, here only how to implement, specific vuex how to use the registered please see previous blog https://www.cnblogs.com/ljx20180807/p/9838259.html

// 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, 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: {

// Listen for showHttpLoading to trigger loading

      '$store.state.showHttpLoading' (val) {

        // set loading

        this.showHttpLoading = val

      }

    }

  }

</script>

Copy the code

Where to call it; My project is called when all requests are made and when a route is redirected;

Loading is closed if the request is successful. Specific effect can be confirmed according to your company’s needs

2. Write the show and hide rule config.js

// 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 () {

// Request interceptor

  axios.interceptors.request.use(function (config) {

/ / trigger loading

    store.commit('UPDATE_SHOW_HTTP_LOADING'.true)

.

  }, function (err) {

// Throw an error

    store.commit('UPDATE_SHOW_HTTP_LOADING'.false)

.

  })



// Add a response interceptor

  axios.interceptors.response.use(function (response) {

// The request was successfully disabled

    store.commit('UPDATE_SHOW_HTTP_LOADING'.false)

.

  }, function (error) {

    store.commit('UPDATE_SHOW_HTTP_LOADING'.false)

.

  })



// The front guard is only used to trigger the loading effect

  router.beforeEach((to, from, next) => {

    if (to.matched && to.matched.length && to.matched[0].path) {

// Authorization triggers loading

      store.commit('UPDATE_SHOW_HTTP_LOADING'.true)

      next()

    }

  })



// If loading is not used, remove it

  router.afterEach((to, from) => {

/ / close the loading

    store.commit('UPDATE_SHOW_HTTP_LOADING'.false)

  })

Copy the code

Call config.js in main.js and initialize config.init()

import config from '@/utils/config.js'

/ / initialization

config.init()

Copy the code

Effect of four,

There is no lag in the renderings, it seems that some lag is recordedgifGraph tool reasons.

Five, the end

Article source: your blog at https://www.cnblogs.com/ljx20180807/p/10319776.html