小程序官网总结（vue框架+php模板渲染+rem适配）

debug

bug1：加载的时候有一瞬间闪过没有样式的dom（内容全挤到一块）

解决思路：css/js/html 加载顺序有问题  --> 查看引入的文件顺序 --> 调整好顺序以后发现问题还是没解决 --> 分别屏蔽引入的文件，查看效果 --> 发现引入的rem.js被屏蔽后，页面的效果和原本页面一闪而过的错乱页面一样

js效果

1.头部导航栏随着滚动条拖动变换颜色

实现效果：

实现逻辑：滚动条在顶端时背景为透明、拖动到banner时与banner同色、拖动到banner结束时为黑色

封成函数，可以在多个页面复用，上代码（可放在外部js文件内）

function changeHeaderColor(bannerClassName,bannerColor){      //传入的两个参数为1、banner的类名（为了能在首页和子页面复用），2、banner颜色
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;    //获取滚动条滚动长度（兼容ie）
        var bannerHeight = document.getElementsByClassName(bannerClassName)[0].offsetHeight; //获取banner高度
        var hcolor = document.getElementById('miniapp-header');                //获取顶部导航栏节点
        if( scrollTop === 0 ){
            hcolor.style.backgroundColor = "rgba(22,22,22,.1)";
        }
        if( scrollTop > 0 ){
            hcolor.style.backgroundColor =  bannerColor;
        }
        if( scrollTop > bannerHeight ){
            hcolor.style.backgroundColor = "rgba(22,22,22,0.85)";
        }
    };

在不同页面调用

window.onscroll = function(){
        changeHeaderColor('block','#1F2531');
    }; //滚动条滚动时出发事件执行上述函数，记得外面的function不能缺，否则会出错

css3效果

1.长文字隐藏（包括多行和一行）

实现效果：（此方法只能实现一行省略，多行省略请查看https://www.cnblogs.com/hellman/p/5755376.html）

• 数据（很长）

width: 3.35rem;                /*设置一个宽度来使溢出部分被隐藏*/
white-space: nowrap;         /*设置文字不换行*/
text-overflow: ellipsis;    /*溢出来的文字用省略号代替*/
overflow: hidden;            /*溢出内容隐藏掉*/

• 悬浮提示：使用title属性
• 相关定义及用法（title属性、white属性、text-overflow属性）

2.hover放大/缩小效果

效果：

.marketing-miniapp-function li:hover {
    box-shadow: 0 0 0.32rem 0 rgba(0,0,0,0.18);    /*设置盒子阴影营造投影效果*/
    transition: 0.3s;                                /*设置过渡效果，让变换不那么僵硬*/
    transform: scale(1.1,1.1);}                /*放大效果*/

以下代码为另一个位移效果

transform: translate(-0.05rem,-0.05rem);      /*2d位移，若用绝对定位改变hover时块的位置，则会一直闪*/
box-shadow: 0 12px 30px -8px rgba(0,0,0,.2);
transition: 0.3s; /*从没有hover过渡到hover用的时间*/
cursor: pointer; /*将鼠标移到块时，鼠标显示为抓手*/

千万不要用element：hover{width：xxpx；height：xxpx} 去改变它的大小，出来效果不好（其实下面的方法也有一个缺点：文字在放大的时候有一瞬间的模糊）

以下方法都是transform属性的值，用于对元素进行移动、缩放、转动、拉长或拉伸。（这个属性贼好用）

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9 需要前缀 -ms-。

translate() 方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

rotate() 方法

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

scale() 方法

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

skew() 方法

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

matrix() 方法

matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。