工作问题记录

78 阅读1分钟

1. webview中background-size不生效的问题

因该次需求中tab样式复杂,在手写的过程中,利用每个tab的伪元素分别写样式拼接了特殊样式
image.png

这样写,在电脑不同的手机尺寸下,以及用微信查看时, 都没有任何问题, 但是在手机app上看,样式效果有问题,

经排查,是background-size未生效

解决办法:

image.png

1.需要将url写在background-image中 2.需要将no-repeat单独写在background-repeat中 3.增加background-position: center top;

2.使用ul li来写tab导致的问题

tab因为是手写,最开始直接使用了ul li,因样式复杂,后续发现会导致底部一直有一条线(白色的底线,非绿色小方块) 如图:

image.png

经排查: 还是ul li本身属性自带一条底部的线的问题

a.该线用ul li来进行取消的属性都未生效;

b.在外层的ul和li之间包了一层view,给定位到底部,想覆盖这条线,也不行,

c.增加了text-decoration:none; 不行;

d.给ul加上class: before_hide after_hide 的样式 然后也不行

 <ul class="mui-table-view before_hide after_hide"></ul>
.before_hide:before {
    display: none;
}
.after_hide:after {
    display: none;
}

还是没有完全解决这条线的问题,不想纠结了,换了处理方式, 直接去掉ul li 的写法, 直接改成View div方式 再增加li的className

3.获取url的参数来定位锚点时,未生效的问题

经排查: 在定位锚点时,定位太快,接口数据才返回,导致定位锚点未生效

改了整体获取数据的写法,在回调中对锚点增加了延时:

image.png

image.png