1.移动端禁止遮罩层下面的页面滑动
答:打开遮罩层的时候,给遮罩层下面的页面添加position:fixed属性,页面就是固定的,没办法滑动了。遮罩层消失之后,下面的页面去掉position:fixed属性即可。(可通过控制类名的方式)
2.移动端点透问题
答:阻止冒泡(event.stopPropagation());
3.键盘将input框顶上去
解决思路:可以采用动态获取底部footer的offset().top 再减去其父元素offset().top ,将其差值当作footer的的margin-top数值的,同时remove掉footer的fixed属性。
function offsetTop(elements) {
var top = elements.offsetTop;
var parent = elements.offsetParent;
while (parent != null) {
top += parent.offsetTop;
parent = parent.offsetParent;
}
return top;
}
var offtop = offsetTop($(".setting_btn_clear")[0]) - offsetTop($(".setting_btn")[0]) - 60;
if (offtop > 0) {
$(".setting_btn").css({"textAlign": "center"});
$(".setting_remenber").css({"position": "static", "marginTop": (offtop - 30), "textAlign": "center"});
$(".setting_btn_clear").css({"position": "static"});
$(".setting_btn_sure").css({"position": "static", "marginLeft": "20px"});
}
4.点击使用tap事件,可以解决click的延迟问题;
5.底部border的1像素问题和去掉border的问题 (stylus)
border-1px($color)
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top: 1px solid $color
content: ' '
--------------------------------
border-none()
&:after
display: none
6.设置背景图片(stylus)
bg-image($url)
background-image: url($url + "@2x.png")
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
background-image: url($url + "@3x.png")