vue php模板渲染,小程序官网总结（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() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。