1. 程式人生 > >日常開發記錄打卡系列--新版微信瀏覽器H5開發

日常開發記錄打卡系列--新版微信瀏覽器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  還沒有用洗面奶洗頭的開發