android 弹出底部操作框

转载

charlesc 2024-10-29 17:24:01

文章标签 android 弹出底部操作框 css 移动端 ios 文章分类 Android 移动开发

开发移动端页面时，需求弹窗是经常遇到的，比如点击某个按钮弹个框出来，查看更多，查看规则弹个框出来。

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插件来解决

附源码：

android 弹出底部操作框_移动端