[CSS]iOS Safari中滑动不流畅的问题
iOS有很多独特(奇怪)的表现,最近在做一个H5页面时,遇到了真机上滑动不流畅的问题。查阅资料得知,可以给带滚动条的那个元素设置-webkit-overflow-scrolling: touch
解决这个问题,但设置之后依然如故。最后经过实验,必须给滚动元素显式的设置overflow: auto|scroll
才能解决这个问题。
具体原理留待空闲时研究。
iOS有很多独特(奇怪)的表现,最近在做一个H5页面时,遇到了真机上滑动不流畅的问题。查阅资料得知,可以给带滚动条的那个元素设置-webkit-overflow-scrolling: touch
解决这个问题,但设置之后依然如故。最后经过实验,必须给滚动元素显式的设置overflow: auto|scroll
才能解决这个问题。
具体原理留待空闲时研究。
image组件底部有空白,这可能是小程序自身的bug,对image设置vertical-align
为任意值即可消除。
更新时间:2019-06-22
一直以来对小程序image
组件底部空白的理解是错误的,以前以为是inline-block
元素底部自带的一点空白,现在在用到image
的时候发现其实不是的。
小程序image
组件有一个默认的高度:240px
,如果image
组件不设置mode
,并且高度不够240px
,底部就会出现空白。
消除image
组件空白有两种方法:设置合适的mode
、设置固定高度。
比如,要图片宽度是100%
,高度自适应,就可以这样设置:
<image mode='widthFix' src='xxxx.png'></image>
经过实验发现,给image
设置height: auto
会导致图片高度为0,所以不能通过重置高度来消除空白,只能设置固定的高度,比如:height: 100%
、height: 40px
等。
更新时间:2019-06-26
在image
垂直排列的时候,image
的宽度是100%
,mode
是widthFix
,底下依然会有空白,这就是我在开头的时候遇到的情况了。
刚开始写了个递归:
function getOffsetPosition(element, x, y){
x = x || 0;
y = y || 0;
if(element.offsetParent != null){
return getOffsetPosition(element.offsetParent, element.offsetLeft + x, element.offsetTop + y);
}else{
return {
x: x,
y: y
}
}
};
getOffsetPosition(document.getElementById('id'));
// { x: 100, y: 666 }
scroll-view不可见的时候,设置它的位置是不起作用的。
其他组件也应该有一样的特性。
开发的时候要注意。
在保存图片到相册后,微信会弹出提示“图片已保存到xxxxxx”,如果在saveImageToPhotosAlbum
的success
中想要提示用户保存成功,就必须先调用hideLoading()
,否则自己写的showToast
是不会显示的。
wx.saveImageToPhotosAlbum({
success(res) {
wx.hideLoading(); // 必须先调用这个
wx.showToast({
title: '图片已保存到您的相册',
icon: 'none',
duration: 4000
});
}
})
由于移动端屏幕的像素密度都非常高,css中的1px
呈现在屏幕中,往往不止1个物理像素,看起来比较粗,设计师很难满意。这和devicePixelRatio
有关。
用transform
实现看起来比较细的边框是一个很简单的方案,在移动端兼容性也非常好,不需要多余的资源,当然,肯定要多些几行代码。
今天要开发类通讯录的可滑动字母索引效果,搜遍了百度也没找到相关的代码,都是只能点击,不能滑动。
其实这个功能不难实现,各位大神应该是不屑提起。这篇文章只是作为记录,如果能给初学者带来一点帮助就更好了。
defaultValue
HTML
<input type="text" value="Hello world">
JavaScript
const input = document.querySelector('input');
console.log(input.value); // 'Hello world'
input.value = 'New value';
console.log(input.value); // 'New value'
console.log(input.defaultValue); // 'Hello world'
如代码所示,当用JavaScript改变了input
的value
后,可以使用defaultValue
来获取这个元素的初始值。
在线演示:
以下内容都是基于preserveAspectRatio为默认状态时的情况,也就是不考虑preserveAspectRatio。
为什么设置viewBox的min-x, min-y
后,如果设置的是正值,图像反而会向左/上移动,而设置负值则向右/下移动呢?
我是这么理解的:
viewBox
的左上角总是和视窗的左上角对齐。在设置viewBox
的min-x
、min-y
后,
viewBox
的起点就会向右/下
移动;扩展画布
,左/上
会填充空白。viewBox
的起点会移动到视窗的原点位置,所以,如果设置的值是正值,图像就会被裁切,而如果设置的是负值,就会发现图像左左侧/上侧填充了空白。viewBox
起点与视窗的起点对齐,这时候就出现了文章开始让人疑惑的现象。这里有张鑫旭的文章,讲解的非常透彻
理解SVG viewport,viewBox,preserveAspectRatio缩放 张鑫旭