1.移動端禁止遮罩層下面的頁面滑動
答:打開遮罩層的時(shí)候瞪醋,給遮罩層下面的頁面添加position:fixed屬性,頁面就是固定的装诡,沒辦法滑動了银受。遮罩層消失之后,下面的頁面去掉position:fixed屬性即可践盼。(可通過控制類名的方式)
2.移動端點(diǎn)透問題
答:阻止冒泡(event.stopPropagation());
3.鍵盤將input框頂上去
解決思路:可以采用動態(tài)獲取底部footer的offset().top 再減去其父元素offset().top ,將其差值當(dāng)作footer的的margin-top數(shù)值的宾巍,同時(shí)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.點(diǎn)擊使用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.設(shè)置背景圖片(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")