超出部分隐藏，横向滑动的菜单栏

overflow-x: auto; //如果溢出框，则应该提供滚动机制。
white-space: nowrap; //规定段落中的文本不进行换行。

==========================================================

切换筛选菜单

筛选菜单1.png
筛选菜单2.png

<template>
<div id="sort-and-zone">
    <div id="sort" @click="sortOrZone(0)"><span>{{sortSpan}}</span><div class="nav-triangle"></div></div>
    <div id="zone" @click="sortOrZone(1)"><span>{{zoneSpan}}</span><div class="nav-triangle zone-triangle"></div>
</div>
<div v-show="isShadow" id="sort-and-zone-shadow" @click="hideShadow">
    <div id="sort-options" v-show="isSort">
        <ul class="sorts" v-for="item in sorts" :key="item.index">
             <li><span>{{item.name}}</span></li>
        </ul>
    </div>
    <div id="zone-options" v-show="!isSort">
        <ul class="zones" v-for="item in zones" :key="item.index">
             <li><span>{{item.name}}</span></li>
        </ul>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            sortSpan: "最新帖子",
            zoneSpan: "全部分区",
            isShadow: false,
            sortOrZoneFlag: -1,
            isSort: true,
            sorts: [
                {index: 6, name: "最新帖子", param: "last"},
                {index: 7, name: "最热帖子", param: "hot"},
                {index: 8, name: "最热帖子", param: "hot"},
                {index: 9, name: "最热帖子", param: "hot"}
            ],
            zones: [
                {index: 0, name: "全部分区", param: "all"},
                {index: 1, name: "沿途风光", param: "scenery"},
                {index: 2, name: "沿途风光", param: "scenery"},
                {index: 3, name: "沿途风光", param: "scenery"},
                {index: 4, name: "沿途风光", param: "scenery"},
                {index: 5, name: "沿途风光", param: "scenery"},
                {index: 15, name: "沿途风光", param: "scenery"},
                {index: 25, name: "沿途风光", param: "scenery"},
                {index: 35, name: "沿途风光", param: "scenery"},
                {index: 45, name: "沿途风光", param: "scenery"},
                {index: 55, name: "沿途风光", param: "scenery"},
                {index: 65, name: "沿途风光", param: "scenery"}
            ]
        }
    },
    methods: {
         sortOrZone: function(flag) {
            var _this = this;
            if(_this.sortOrZoneFlag == -1) { //初始状态，没有展开菜单
                _this.sortOrZoneFlag = flag; //记录当前菜单对应的按钮
                _this.isShadow = !_this.isShadow; //展开菜单，展示相应的菜单内容
                if(flag == 0) {
                    _this.isSort = true;
                }else {
                    _this.isSort = false;
                }
                $("html").css("overflow", "hidden");//PC端这样设置可以使得页面在遮罩层出现时禁止滚动，但是移动端无效
                $("body").css("overflow", "hidden");
                $('#sort-and-zone-shadow').bind("touchmove",function(e){//该方法为遮罩层添加滑动时的事件
                    e.preventDefault();//preventDefault()取消默认事件，来达到遮罩层出现时禁止滑动的效果
                });
            }else if(_this.sortOrZoneFlag == flag) { //该按钮展开了菜单，现在应该收起菜单
                _this.isShadow = !_this.isShadow; //收起菜单
                _this.sortOrZoneFlag = -1; //回到初始状态
                $("html").css("overflow", "visible");
                $("body").css("overflow", "visible");
            }else { //另一个按钮被点击，应保持菜单展开状态，更换相应的菜单内容
                _this.sortOrZoneFlag = flag; //更改当前菜单对应的按钮
                _this.isSort = !_this.isSort
                $("html").css("overflow", "hidden");
                $("body").css("overflow", "hidden");
                $('#sort-and-zone-shadow').bind("touchmove",function(e){
                    e.preventDefault();
                });
            }
         },
         hideShadow: function() {
             var _this = this;
             _this.isShadow = false; //收起菜单
            _this.sortOrZoneFlag = -1; //回到初始状态
            $("html").css("overflow", "visible");
            $("body").css("overflow", "visible");
         }
    }
}
</script>

==========================================================

类似的小标签通过给<span>添加背景颜色实现，或者给<span>添加边框样式

帖子小标签.png

==========================================================

两种盒模型的区别

1.box-sizing: content-box:
W3C标准盒模型
盒子所占空间的宽度 = content.width+padding×2+border×2+margin×2
盒子的实际宽度 = content.width+padding×2+border×2

2.box-sizing: border-box:
IE的盒模型
盒子所占空间的宽度 = content.width+margin×2
盒子的实际宽度 = content.width

3.区别：
在使用W3C标准盒模型时，定义宽度只是对content的定义，对padding、border、margin的定义是额外加上去的，它们都会改变盒子的实际大小以及所占空间。在使用IE盒模型时，定义的宽度是包含了padding和border的，对padding、border、margin的定义都不会改变盒子的实际大小，但是对margin的定义会改变盒子所占空间的大小，而对padding和border的定义不会。
==========================================================

在有遮罩层出现时，禁止对遮罩层以下的内容进行操作（PC端滚动，移动端滑动）
1.PC端
将超出的部分隐藏，设置overflow为hidden
2.移动端
阻止遮罩层的默认事件

$("遮罩层").bind("touchmove", function(e) {
    e.preventDefault();
})

==========================================================

下拉刷新
jQuery插件（pulltorefresh.js）

var ptr =  PullToRefresh.init({
    mainElement: "选择下拉的element",
    onRefresh: function() {
        window.location.reload();
    }
});

==========================================================

返回上一页
在index.js中使用keepAlive使组件保留状态，避免重新渲染。
在二级页面使用history.go(-1)或者history.back()来返回上一个页面。
history.go(-1)会使得要返回的页面刷新，而history.back()不会刷新。
以上为理论，下面是实际使用的结果：
我在index.js中为index.vue组件设置了

{
    path: '/',
    name: 'index',
    component: 'index',
    meta: {
        keepAlive: true
    }
}

之后，再使用history.back()和history.go(-1)返回index页面，index组件都没有重新渲染。而在不设
置keepAlive属性时，返回index页面，组件都重新渲染了，页面被刷新了。
==========================================================

vue组件或者元素的过渡
使用transition来实现元素或组件的过渡。
一个通用的例子，实现简单地过渡。

<transition name="fade">
    <div v-show="isIsSignBoardShow" id="is-sign-board">今天已签到</div>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8   #5086A5      */ {
  opacity: 0;
}

==========================================================

vue路由设置页面不刷新
在router.js中把需要缓存的页面设置为：

{
    path: "/",
    name: "index",
    component: index,
    meta: {
        keepAlive: true
    }
}

在App.vue中，需要缓存的页面这样写：

<keep-alive>
    <router-view v-if="$route.meta.keepAlive" v-on:isMenuNeed="isMenuNeed" v-on:needReload="reload"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" v-on:isMenuNeed="isMenuNeed" v-on:needReload="reload"></router-view>

在需要返回的页面，用history.back()返回。（返回的两种方式之前写过了）

==========================================================

返回时定位到之前离开的位置
本次使用的是根据滚动条的高度来对页面进行定位。
在跳转页面的额函数中：

var scrollH = $("滚动的元素").scrollTop();//获取当前滚动条到屏幕上方的距离
sessionStorage.setItem("h", scrollH);//将当前滚动条到屏幕上方的距离存入sessionStorage
//在返回的页面中的activated函数中：（activated函数是在keep-alive 组件激活时调用的）
var h = sessionStorage.getItem("h");//从sessionStorage中取出离开时的滚动条到屏幕上方的距离
$("#test-wrap").scrollTop(h);//设置滚动条到屏幕上方的距离来定位页面位置
//在返回的页面中的created函数中：
sessionStorage.setItem("h", 0);//将sessionStorage存储的滚动条到屏幕上方的距离改为0，这样在页面刷新的时候页面就会回到最上方。

还有一种利用锚点来定位，个人感觉在本次的页面中不太好利用，因此没有使用。

==========================================================

复杂的布局和定位灵活运用position属性：
relative属性的元素初始位置是一直被占据的，而absolute属性的元素不会。
relative属性的元素定位是相对初始位置定位的，而absolute属性的元素是相对它父元素中拥有position属性的元素定位的，如果父元素中没有就相对body定位。
在复杂的布局定位中可以给父元素设置position: relative,子元素设置position: absolute，这样子元素就可以被设置到想要的想对于父元素的任意位置了。

==========================================================

下拉刷新和上滑加载更多
需要引用刷新的组件（父组件）

<template>
    <v-load id="test-wrap" :on-refresh="onRefresh" :on-infinite="onInfinite" :tPage="page">//onRefresh是下拉刷新，onInfinite是上滑加载更多，可根据需求取舍。把当前的页数传到子组件。
        <card v-for="card in cards" :key="card.id"></card>
    </v-load>
</template>
<script>
    import card from "components/card.vue";
    import load from "components/load.vue";//引入组件
    export default {
        data() {
            return {
                page: 0
            }
        }
    components: {
        vLoad: load//注册组件
    },
    methods: {
        // 下拉刷新
        onRefresh(done) {
        window.location.reload();
        done(); //加载完成，防止重复执行
        },
        // 上滑加载更多
        onInfinite(done) {
            // window.location.reload();
        var _this = this;
        if(_this.page == 6) {
            done();
        }else {
            setTimeout(function() {
            _this.addMore();
            _this.page += 1;
            done();
            }, 1000);//设置一秒钟之后是为了方便观察效果
        }
        }
    }
    }
</script>

load.vue
<template>
  <div class="yo-scroll"
    :class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:touching}"
    @touchstart="touchStart($event)"
    @touchmove="touchMove($event)"
    @touchend="touchEnd($event)"
    @scroll="(onInfinite || infiniteLoading) ? onScroll($event) : undefined">
    <section class="inner" :style="{ transform: 'translate3d(0, ' + top + 'px, 0)' }">
      <header class="pull-refresh">
        <slot name="pull-refresh">
           <span class="down-tip">下拉更新</span>
           <span class="up-tip">松开更新</span>
           <span class="refresh-tip">更新中</span>
        </slot>
      </header>
      <slot></slot>
      <footer class="load-more">
        <slot name="load-more">
          <span v-show="!isAll">加载中……</span>
          <span v-show="isAll">加载完毕</span>
        </slot>
      </footer>
    </section>
  </div>
</template>
<script>
export default {
  props: {
    offset: {
      type: Number,
      default: 40
    },
    enableInfinite: {
      type: Boolean,
      default: true
    },
    enableRefresh: {
      type: Boolean,
      default: true
    },
    onRefresh: {
      type: Function,
      default: undefined,
      required: false
    },
    onInfinite: {
      type: Function,
      default: undefined,
      require: false
    },
    tPage: {
      type: Number//接收到当前页数
    }
  },
  data() {
    return {
      top: 0,
      state: 0,
      startY: 0,
      touching: false,
      infiniteLoading: false,
      isAll: false
    }
  },
  methods: {
    touchStart(e) {
      this.startY = e.targetTouches[0].pageY
      this.startScroll = this.$el.scrollTop || 0
      this.touching = true
    },
    touchMove(e) {
      if (!this.enableRefresh || this.$el.scrollTop > 0 || !this.touching) {
        return
      }
      let diff = e.targetTouches[0].pageY - this.startY - this.startScroll
      if (diff > 0) e.preventDefault()
      this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0)

      if (this.state === 2) { // in refreshing
        return
      }
      if (this.top >= this.offset) {
        this.state = 1
      } else {
        this.state = 0
      }
    },
    touchEnd(e) {
      if (!this.enableRefresh) return
      this.touching = false
      if (this.state === 2) { // in refreshing
        this.state = 2
        this.top = this.offset
        return
      }
      if (this.top >= this.offset) { // do refresh
        this.refresh()
      } else { // cancel refresh
        this.state = 0
        this.top = 0
      }
    },
    refresh() {
      this.state = 2
      this.top = this.offset
      this.onRefresh(this.refreshDone)
    },
    refreshDone() {
      this.state = 0
      this.top = 0
    },

    infinite() {
      this.infiniteLoading = true
      this.onInfinite(this.infiniteDone)
    },

    infiniteDone() {
      this.infiniteLoading = false
    },

    onScroll(e) {
      if (!this.enableInfinite || this.infiniteLoading) {
        return
      }
      let outerHeight = this.$el.clientHeight
      let innerHeight = this.$el.querySelector('.inner').clientHeight
      let scrollTop = this.$el.scrollTop
      let ptrHeight = this.onRefresh ? this.$el.querySelector('.pull-refresh').clientHeight : 0
      let infiniteHeight = this.$el.querySelector('.load-more').clientHeight
      let bottom = innerHeight - outerHeight - scrollTop - ptrHeight
      if (bottom < -80) this.infinite()
    }
  },
  //当数据发生变化时执行（vue生命周期中的钩子函数updated）
  updated: function() {//这里把总页数设置为6，判断是否加载完毕
    if(this.tPage == 6) {
      this.isAll = true;
    }
  }
}
</script>
<style scoped>
.yo-scroll {
  position: absolute;
  top: 2.5rem;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #f9f9f9;
}
.yo-scroll .inner {
  position: absolute;
  top: -2rem;
  width: 100%;
  margin-bottom: 55px;
  margin-top: 50px;
  transition-duration: 300ms;
  /* background-color: rgb(228, 29, 29); */
}
.yo-scroll .pull-refresh {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yo-scroll.touch .inner {
  transition-duration: 0ms;
}
.yo-scroll.down .down-tip {
  display: block;
}
.yo-scroll.up .up-tip {
  display: block;
}
.yo-scroll.refresh .refresh-tip {
  display: block;
}
.yo-scroll .down-tip,
.yo-scroll .refresh-tip,
.yo-scroll .up-tip {
  display: none;
}
.yo-scroll .load-more {
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}  
</style>

==========================================================

H5页面适配

解决div在不同尺寸屏幕上等比缩放的问题：

//将viewport的宽度设置为设备屏幕的宽度，同时不允许用户手动缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

var deviceWidth = document.documentElement.clientWidth;//获取设备屏幕宽度
document.documentElement.style.fontSize = deviceWidth+"px";//设置HTML的fontSize

@function calc(\$val) {
    @return $val/1080;
}
.logo {
    width: calc(180rem);
}

解决1px的问题：
先将整个页面缩小dpr倍，再把跟字体大小放大dpr倍。（页面整体需要采用rem单位）

解决横屏问题：
横屏时让width=height的效果是最好的。

var deviceWidth = document.documentElement.clientWidth;
var deviceHeight = document.documentElement.clientHeight;
if(window.orientation === 90 || window.orientation == -90) {
    deviceWidth = deviceHeight;
}
document.documentElement.style.fontSize = deviceWidth + 'px';

判断手机横竖屏的方法：
if (window.orientation === 180 || window.orientation === 0) { 
    console.log('竖屏状态！');
}
if (window.orientation === 90 || window.orientation === -90 ){ 
    console.log('横屏状态！');
}

在同一个CSS中两套样式：

@media screen and (orientation: portrait) {
  /*竖屏 css*/    
} 
@media screen and (orientation: landscape) {
  /*横屏 css*/
}

在link中筛选样式

<!-- 竖屏 -->
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<!-- 竖屏 -->
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

H5适配方案：

html:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <!-- 正文 -->
</body>
</html>

js:
/**
 * @DESCRIPTION 移动端页面适配解决方案 v1.0
 * @AUTHOR      Night
 * @DATE        2018年08月01日
 */
(function(window, document){
    var docEle = document.documentElement,
        dpr    = window.devicePixelRatio || 1,
        scale  = 1 / dpr;
    
    var fontSizeRadio = 1, //手机字体正常比例
        isLandscape   = false;//是否横屏
    
    ///////////////////////// viewport start //////////////////////////////////
    
    //设置页面缩放比例并禁止用户手动缩放
    document.getElementsByName('viewport')[0].setAttribute('content','width=device-width,initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no');
    
    ///////////////////////// viewport end //////////////////////////////////
    
    //横屏状态检测
    if (window.orientation === 90 || window.orientation === -90) {
        isLandscape = true;
    };

    ///////////////////// system font-size check start //////////////////////
    
    //试探字体大小，用于检测系统字体是否正常
    var setFz = '100px';

    //给head增加一个隐藏元素
    var headEle = document.getElementsByTagName('head')[0],
        spanEle = document.createElement('span');
        spanEle.style.fontSize = setFz;
        spanEle.style.display = 'none';
        headEle.appendChild(spanEle);

    //判断元素真实的字体大小是否setFz
    //如果不相等则获取真实的字体换算比例
    var realFz = getComputedStyle(headEle).getPropertyValue('font-size');

    if(setFz !== 'realFz'){
        //去掉单位px，下面要参与计算
        setFz = parseFloat(setFz);
        realFz = parseFloat(realFz);

        //获取字体换算比例
        fontSizeRadio = setFz / realFz;
    };
    
    ///////////////////// system font-size check end //////////////////////
    
    var setBaseFontSize = function(){
        var deviceWidth = docEle.clientWidth,
            deviceHeight= docEle.clientHeight;
        
        if(isLandscape){
            deviceWidth = deviceHeight;
        };
        
        docEle.style.fontSize = deviceWidth * fontSizeRadio + 'px';
    };
    setBaseFontSize();
    
    //页面发生变化时重置font-size
    //防止多个事件重复执行，增加延迟300ms操作(防抖)
    var tid;
    window.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(setBaseFontSize, 300);
    }, false);
    window.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(setBaseFontSize, 300);
        };
    }, false);
    
})(window, document);

scss:
//设计稿尺寸大小，假如设计稿宽度750
$baseDesignWidth = 750;

@function calc($val){
    @return $val / $baseDesignWidth;
}

//适配元素采用rem，假如设计稿中元素宽度180
.logo{
    width : calc(180rem);
}

//边框采用px，假如设计稿边框宽度1px
.box{
    border : 1px solid #ddd;
}

作者：vivo丨sunmaobin
链接：https://juejin.im/post/5b6503dee51d45191e0d30d2
来源：掘金

关于字体大小问题：
PC端文字的最小尺寸为12px
移动端文字最小尺寸为8px
如果文字的尺寸小于最小尺寸则显示为最小尺寸
文字大小用最好以px为单位