日常开发记录打卡系列--新版微信浏览器H5开发

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Sourcemyx/article/details/81135118

微信更新新版之后，有的吐槽有的点赞

不管你是因为新版微信的什么问题导致前端页面和逻辑有影响的

这篇文章主要讲的就是 哪一些原因你能控制 哪一些无法控制的。

 

1.Fixed固定定位

在头部或者底部的 会因为返回栏或顶部栏滚动缩小

拿个京东的例子给大家看看

 

是不是心里拔凉拔凉的，内心想法：‘没错 是我了’

这个大家想在原有的布局方法 上去改 可能性不大。

为啥？

扫描二维码关注公众号，回复： 3612184 查看本文章

为大家分析这几点

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  还没有用洗面奶洗头的开发