每日一贴--2017/9/13

图图大耳朵

于 2017-09-13 17:41:10 发布

阅读量210

点赞数

分类专栏：每日一贴文章标签： vue 移动端自适应

本文链接：https://blog.csdn.net/qq_33437513/article/details/77968888

版权

每日一贴专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.安装vue

     
     
      
      # 全局安装 vue-cli
     
     
     
     
      
      $ npm install --global vue-cli
     
     
     
     
      
      # 创建一个基于 webpack 模板的新项目
     
     
     
     
      
      $ vue init webpack my-project
     
     
     
     
      
      # 安装依赖，走你
     
     
     
     
      
      $ cd my-project
     
     
     
     
      
      $ npm install
     
     
     
     
      
      $ npm run dev

2.禁止用户缩放屏幕,在index.html上添加

<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1,minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi ">

3.修改App.vue,添加单页面路由,添加路由特效

<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view class="child-view"></router-view>
    </transition>
  </div>
</template>

<script>
  import initFontSize from './base/utils'

  export default {
    name: 'app',
    data: function () {
      return {
        transitionName: 'slide-left'
      }
    },
    beforeCreate: function () {

    },
    created: function () {
      document.body.style = 'margin: 0px;padding: 0px;width: 100%;height: 100%;'
      initFontSize(16)
      this.$router.push("/login")
    },
    beforeRouteUpdate(to, from, next) {
      let isBack = this.$router.isBack
      if (isBack) {
        this.transitionName = 'slide-right'
      } else {
        this.transitionName = 'slide-left'
      }
      this.$router.isBack = false
      next()
    }
  }
</script>

<style scoped>
  * {
    margin: 0px;
    padding: 0px;
  }

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  .child-view {
    position: absolute;
    transition: all .1s cubic-bezier(0, 0, .1, 1);
  }

  .slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(50px, 0);
    transform: translate(50px, 0);
  }

  .slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-50px, 0);
    transform: translate(-50px, 0);
  }

</style>

4.添加屏幕自适应判断文件
	const doc = document
const win = window
const initFontSize = function (fontsize) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      console.log('clientWidth==>'+clientWidth)
      if (!clientWidth) return;
      //按照iphone6的屏幕尺寸来计算
      docEl.style.fontSize = fontsize * (clientWidth / 375) + 'px';
    };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
}
export default initFontSize
5.还差一个sass处理明天整