uni-app H5与iOS布局不一致大BUG
uni-app H5与iOS布局不一致大BUG
详细问题描述
同一套代码在H5与iOS中的布局完成不一样！在H5中会为每个标签生成一个data-v-xxxxx属性，但是在iOS平台下不会。
如果我在组件A中定义一个名为l的css:
.l{
width:10rpx;
}
同样在B组件中定义一个名为l的css:
.l{
width:100rpx;
}
在B组件中引用A组件。
在H5中使用class="l"的元素宽为100rpx。因为在H5中最终生成的是.l[data-v xxxx], 而在iOS中使用l的元素宽可能是10rpx。因为页面中存在多个l的定义，并且最终生成的css就是l,而不是l[data-v xxxx]
更多关于uni-app H5与iOS布局不一致大BUG的实战教程也可以访问 https://www.itying.com/category-93-b0.html
6 回复
可以给组件 style 设置 scoped 来隔离样式。
H5端不同，是因为H5端没有多 webview 来隔离页面，所以H5端只能默认启用了样式隔离。
更多关于uni-app H5与iOS布局不一致大BUG的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是一个典型的uni-app样式作用域问题。在H5平台下，uni-app默认启用了scoped样式，会为每个组件添加data-v-xxxxx属性来实现样式隔离。但在iOS平台下，由于小程序环境限制，这种作用域隔离机制不生效。
解决方案：
- 避免使用全局同名class，改为组件级命名：
/* A组件 */
.a-l {
width:10rpx;
}
/* B组件 */
.b-l {
width:100rpx;
}
- 或者使用style标签的scoped属性强制隔离：
<style scoped>
.l {
width:100rpx;
}
</style>
- 也可以使用uni-app的样式穿透方案：
/* 在B组件中 */
/deep/ .l {
width:100rpx;
}