Vue实践经验

最新推荐文章于 2025-08-15 09:01:53 发布

weixin_34318326

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量65

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/bzhang/blog/740433

本文介绍了前端开发中的一些实用技巧，包括使用Vue.js特性优化用户体验、解决CSS中的position fixed抖动问题、实现H5与APP iframe间的交互等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

<!-- 1、如果支持Google Chrome Frame：GCF，则使用GCF渲染；2、如果系统安装ie8或以上版本，则使用最高版本ie渲染；3、否则，这个设定可以忽略。 -->
<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
      }
}

转载于:https://my.oschina.net/bzhang/blog/740433