一、移动端相关问题

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")

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。