开发移动端页面时,需求弹窗是经常遇到的,比如点击某个按钮弹个框出来,查看更多,查看规则弹个框出来。
1.弹框都知道咋弄,无非就是一个div,然后css为position:fixed,宽高都为100%,然后通过一个灰色的透明背景来实现蒙层的效果:background-color:rgba(0,0,0,0.6);
2.在这个蒙层里边再写一个div背景是白色的,然后当做内容区。。。。。这里就不多介绍了。把我之前写的一个更多规则的代码帖这 供参考:
.rule-more-b{
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background:rgba(0, 0, 0, 0.4);
.rule-content-b{
box-sizing: border-box;
border-radius: 10rem/@r;
width: 85%;
height: 85%;
background-color: #fff;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
overflow: hidden;
padding: 40rem/@r 40rem/@r;
.back{
cursor: pointer;
position: absolute;
top: 0;
right: 0;
text-align: right;
.back-img{
padding: 20rem/@r 20rem/@r 0 0;
width: 22px;
height: 22px;
cursor: pointer;
}
}
.rule-info-b{
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: 100%;
.rule-title{
font-size: 32rem/@r;
text-align: center;
font-weight: 800;
}
.rule-list{
.rule-item{
text-align: justify;
}
}
}
}
}
简单说下,弹框里边的内容如果过长就需要滑动,滑动的话overflow:scroll,但是在手机上边滑动总是很不流畅,这时候加一个-webkit-overflow-scrolling:touch;就可以解决了。另外如果你需要你的内容区文字两端对齐,有一个text-align:justify;的属性可以解决,因为我是新手 对于这个text-align属性用的最对的就是让它的内容区为left,center,right。这个justify属性用的少,所以在这里单独提一下。
然后说正文:怎样解决底部滑动的问题。
1.当出现弹窗的时候,给body设置为 position:fixed;overflow:hidden;
2.关闭弹窗的时候,给body的这两个属性去掉。
注:这个时候你会发现每次关闭弹窗之后,总是在页面的最顶部。
因为出现弹窗的时候,整个body都脱离文档流了,所以关闭的时候肯定是以当前手机的最顶部为基准的 ,
我是这样解决的:每次点击弹窗按钮的时候,都会记录一下当前滑动的距离,然后当关闭弹窗的时候,再回到那个位置去,代码如下:
其中的lock样式就是前边提到的两个css样式
//活动规则与返回
var thisScrollTop=0
$(".rule-more-btn").on("click",function(){
thisScrollTop=$(window).scrollTop();
$(".rule-more-b").css("display","block");
$("body").addClass("lock")
})
$("body").on("click",".back",function(){
$("body").removeClass("lock");
$(window).scrollTop(thisScrollTop);
$(".rule-more-b").css("display","none");
thisScrollTop=0;
})
上述方法是移动端不引入其他库的情况下处理的。其实在移动端写弹窗,内部滑动问题通过overflow:scroll解决不完美,安卓ios总之是会有一些问题的。
那么可以考虑引入一个Iscroll.js插件来解决
附源码:
这个使用vue写的,大概的html部分就是这样的。然后页面内引入
就是这个iscroll插件,可以在github上去下载。
使用:
说明:当这个弹窗显示的时候,在nextTick里去调用这个插件,第一个参数是弹窗div的样式名字。第二个参数的作用是,保证弹窗内内容的点击事件可以正常运行,其实就是这个click和taps都是true。
使用完毕后;看下页面的效果====》
原理就是这个库把内容区部分使用transition的方式使其来滑动了,兼容安卓ios。