Vue实践经验

<!-- 一、若是支持Google Chrome Frame：GCF，则使用GCF渲染；二、若是系统安装ie8或以上版本，则使用最高版本ie渲染；三、不然，这个设定能够忽略。 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- 对视窗缩放等级进行限制，使其适应移动端屏幕大小 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 当把这个网页添加到主屏幕时的标题（仅限IOS） -->
<meta name="apple-mobile-web-app-title" content="北邮人论坛注册">
<!-- 添加到主屏幕后全屏显示 -->
<meta name="apple-touch-fullscreen" content="yes" />

这样能让背景平铺

body:before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(bg.png) center 0 no-repeat;
  background-size: cover;
}

没有数据的`{{message}}`直到编译完成才显示：

[v-cloak]{
    display:none;
}

//vue特有方法
<div v-cloak>{{message}}</div>

H5与APP iframe交互！

openBackLink(url){
   var iframe = document.createElement("iframe");
       iframe.setAttribute("src", url);
       iframe.setAttribute("style","dispaly:none;");
       iframe.setAttribute("height","0px");
       iframe.setAttribute("width","0px");
       iframe.setAttribute("frameborder","0");
       document.body.appendChild(iframe);
       iframe.parentNode.removeChild(iframe);
       iframe = null;
}

修复css属性position fixed抖动

目前能够解决的方法我也尝试了一些，只剩下几个。

第一种，给fixed的元素添加css的样式，我试过，这个能够解决此闪动的问题。

-webkit-transform: translateZ(0);

 

第二种，设置css。我是在不复杂的页面作的测试。

 

html, body {height:100%;overflow:auto;margin: 0;}

第三种，引入jquery1.7.2的类库。注意，引入这个CSS可能会致使原来的页面布局出现问题，慎重。个人同事也说，这个是为了解决IE6系列的fixed抖动问题。

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

 

HTML，JQ插入script标签：

var videoScript = document.createElement('script');
    videoScript.src = 'http://union.bokecc.com/player?vid=7E13A04AD8F826429C33DC5901307461&siteid=29639E609A1142B0&autoStart=true&width=100%&height=100%&playerid=2025478528BA86BE&playertype=1';
    videoScript.type ='text/javascript';
    $('#lol').html('');
    document.getElementById('lol').appendChild(videoScript);

判断机型：

var userAgent = navigator.userAgent;
var index = userAgent.indexOf("Android");
if(index >= 0){
    var androidVersion = parseFloat(userAgent.slice(index+10));
    if(androidVersion < 4.5){
        return true
      }else{
        return false
      }
}