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

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

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

切换筛选菜单

筛选菜单1.png

筛选菜单2.png

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

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

帖子小标签.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来实现元素或组件的过渡。
一个通用的例子，实现简单地过渡。


    今天已签到

.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中，需要缓存的页面这样写：

在需要返回的页面，用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，这样子元素就可以被设置到想要的想对于父元素的任意位置了。

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

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

load.vue

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

H5页面适配

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

//将viewport的宽度设置为设备屏幕的宽度，同时不允许用户手动缩放

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中筛选样式

H5适配方案：

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为单位

移动端页面(待更新)

H5页面适配

你可能感兴趣的:(移动端页面(待更新))