前端小拾遗

爱运动的女孩儿
481 阅读4分钟

background的符合写法(以后不用分开写了)

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
//background-color 指定要使用的背景颜色
//bg-image         指定北京图片
//position         指定背景图像的开始位置
//background-size  背景图片的大小
//bg-repeat        是否重复
//bg-origin        background-origin:border-box/content-box;图片的位置是否考虑容器的padding值
//bg-clip          background-clip:border-box/padding-box/content-box默认是bor der-box,图片是否在border/padding开始平铺
//bg-attachment    scroll/fixed 是否随屏幕滚动,默认scroll
常用的属性写法是:background:bg-color bg-image position/bg-size bg-repeat

防止静态文件缓存

有的时候我们已经修改了js/css文件,但是浏览器并没有加载最新的,而是从缓存中读取的,这样就会造成页面显示或者交互的问题,如果想防止这种情况,需要在src后加动态参数.

<script id='myScript'>
var version = Date.now(),
    oScript = document.createElement('script');
    oScript.src = 'xxx/xxx.js?v='+version;
    document.getElementById('myScript').appendChild(oScript);
</script> 
//加一个时间戳在地址后面,这样每次都会重新拉取js文件
//如果不想每次都重新拉取,浪费带宽,只是想在修改的时候重新拉取,也可以手动设置version,当每次js文件修改了,手动更改version,比如
<script src='xxx/xxx.js?t=20190817'></script>
//那天修改的就将参数设置成那天
//如果不想每次修改js都要到特定文件中去修改版本,可以建一个配置文件,来管理js文件的版本

animation 动画执行完后保持在最后状态

这几天在写一些移动端的动画,发现animation定义动画,执行完之后会回到初始状态,需要设置animation-fill-mode的值,使动画保持在最后一帧的效果.

animation-fill-mode : forwards //当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

h5页面内容被浏览器导航栏遮挡

以为想让某个元素一种充满首屏,不管屏幕高矮变化,所以设置了元素的width:100%;height:100vh,(因为父元素不是整屏高,所以高不能设置100%),发现在有的浏览器中是正常的,在某些浏览器中内容会被底部导航栏遮挡.

这是因为在不同的浏览器中100vh有的是包含了底部导航条的高度的,有的是不包含的,所以不能用100vh了.目前是用js动态设置的高度.

不知道有没有css的方式可以设置的,如果有知道的欢迎留言.

如果使用taro,taro有一个taro-tabbar-height可以用来规避tabBar,在h5中会被渲染成50PX,在小程序中会被忽略.

图片变形问题

引入图片方式最常见的是background-img和img标签引入,为了防止图片变形,可以设置background-size:contain,然后把容器设置一个和背景图片一致的背景色.

 background:#ff9630 url('../../../assets/success.png') center top/contain no-repeat;

对于img,可以设置max-height:100%;max-width:100%;图片会自动按比例缩放,然后把容器设置一个和背景图片一致的背景色.

scss动态设置引入1x/2x/3x的图片

首先定义:

@mixin bg-img($url) {
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($url + "@3x.png");
  }
  @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
    background-image: url($url + "@2x.png");
  }
  background-image: url($url + "@1x.png");
}

使用时

.banner {
   @include bg-img("../../../assets/banner");
}

js动态引入2x/3x的图片

let ratio;
if(window.devicePixelRatio>2){
  ratio = 3
}else {
  ratio = 2
}

let banner = require(`@assets/banner@${ratio}x.png`)

页面关闭前发送ajax请求

window.onbeforeunload=function(){
	$.ajax({
		url: "xxx",
		type: "post",
		data: {username:'111'},
		dataType: "json",
		async:false,
		success: function(data){
		  console.log('111')//不能alert,会阻塞事件执行
		},
		error:function(err){
		  console.log('222')//不能alert,会阻塞事件执行
		}
	});
}

window.onload事件

window.onload 是浏览器所有资源加载完成的事件,不是渲染完成的事件,现在还没有监听渲染完成的事件,需要注意的是资源加载和页面渲染是异步的,也就是说浏览器是一边加载一边渲染的.项目中使用window.onload做页面加载的loading状态

let loaded = false
window.onload = function(){
   loaded = true //加载完成了,隐藏loading的状态(👇)
}

需要注意的是如果是很多屏的长页面要做懒加载,否则使用onload控制显示加载状态反而会延迟用户看到首屏内容的时间,因为加载资源和渲染同时进行的.也就是说也在首屏已经渲染好了,可能onload还没执行

avatar
文章
阅读
粉丝