日常開發記錄打卡系列--新版微信瀏覽器H5開發
微信更新新版之後,有的吐槽有的點贊
不管你是因為新版微信的什麼問題導致前端頁面和邏輯有影響的
這篇文章主要講的就是 哪一些原因你能控制 哪一些無法控制的。
1.Fixed固定定位
在頭部或者底部的 會因為返回欄或頂部欄滾動縮小
拿個京東的例子給大家看看
是不是心裡拔涼拔涼的,內心想法:‘沒錯 是我了’
這個大家想在原有的佈局方法 上去改 可能性不大。
為啥?
為大家分析這幾點
1.只要路由有新增記錄或者變化,history的length就+1,那麼此時底部的返回欄就一定會顯示
2.即使有辦法控制返回欄 頂部的固定定位也會有問題
但並不是沒有解決辦法 就像我前面說的
<原有的佈局方法 上去改 可能性不大>
其實以下佈局是能實現的
父元素直接固定定位 所有佈局在裡面寫。
這樣的佈局是可以避免的。
2.新版微信的底部返回欄能控制?
怎麼顯示~?
window.history 其實就是微信瀏覽器判斷history是否有增加來顯示的
那麼控制返回欄出現其實很簡單
window.history.pushstate,咱們插入一條記錄即可 即使是單頁面 插入當前的url 或者插入想返回的url都可以
這裡不細講window.history.pushstate的用法了哈 極客精神!
怎麼消失咧
其實已經說了
window.history 其實就是微信瀏覽器判斷history是否有增加來顯示的
但是window.history是存在客戶端的 JS無法刪除清空,
但是其實window.location.go(-1)倒是可以將window.history減1
但是總不可能獲取window.history.length的長度
在用window.location.go(window.history.length-1)
實際操作可行 不過涉及微信授權的go -1 慎用
歡迎討論啊~~我看目前還沒有人問相關新版微信相關的
幫到你的話 的點個贊是對本系列最大的支援!
我叫Daniel 還沒有用洗面奶洗頭的開發