H5平台下,进行多次跳转之后,页面错乱



  • @ss520k:

    问题描述

    在h5平台页面比较复杂,例如商城的首要,第二次进入页面时,页面布局会变得混乱。

    复现步骤

    1.进入项目主页,商城的首页布局显示正常。
    2. 点击“我的”,进入用户中心。页面布局显示正常。
    3.点击“首页”,进入首页,首页的布局显示混乱。
    4. 没有把任何错误,次现象只发生在h5平台。如果重新刷新浏览器地址,首页布局显示正常。

    期望行为

    不管什么时候进入“首页”,布局都显示正常

    报错信息

    系统信息

    Taro v1.2 及以上版本已添加 taro info 命令,方便大家查看系统及依赖信息,运行该命令后将结果贴下面即可。
    Taro CLI 1.2.13 environment info:
    System:
    OS: Windows 10
    Binaries:
    Node: 10.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.13.0 - C:\Users\fantasy2018\AppData\Roaming\npm\yarn.CMD
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
    

    报错平台

    H5

    补充信息

    有三种可能:
    1.首页数据没有刷新;

    2.首页是一个双列表,类似如淘宝首页,会有各种各样的布局,使用了三层return加map遍历,可能是多层嵌套引起;也许对界面进行切割,把每一种布局定义成一个自定义控件,也许可以解决此问题。

    3.肯能将所有的布局改成flex,以为“我的”页面也重新过次问题,后来改成flex,就好了。但是首页布局复杂,没有办法把所有的布局改成flex.

    @tourze :

    我遇过类似问题,最后发现是样式被污染了。h5里面的样式貌似全部都是“global”的。所以你最好是重构下,使用css module或者bem写法

    @hereisfun:

    遇到过类似问题,当时的情况是多个css规则权重相同导致的。可以看看是否有权重相同的css

    @ss520k

    我找到问题的根本原因,在正常和不正常的布局对比,我发现不正常的布局在标签下面多了“<script charset="utf-8" src="/chunk/user_user.js"></script>
    ”,我在调试的时候删除了这段代码就好了,但是这个代码是在点击“我的”按钮,展示用户中心页面的时候生成的,所以这个bug应该是框架的bug,请taro团队尽快修复此问题。

    @Littly

    应该是页面的样式互相污染了。不同页面应该避免使用相同权重的选择器来定义样式,或者直接使用cssModules,否则后加载的样式必然会覆盖已有的样式。

    总结:

    页面的样式互相污染了。

    不同页面应该避免使用相同权重的选择器来定义样式,或者直接使用cssModules,否则后加载的样式必然会覆盖已有的样式。


登录后回复