uni-app 【报Bug】style添加scoped后 app端page不生效

uni-app 【报Bug】style添加scoped后 app端page不生效

测试过的手机：

  • ios版本11.4.1
  • 安卓版本12
  • iphone6
  • 红米K40

示例代码：

//在标签中添加scoped  
<style scoped>  
    page{  
        background-color: #F6F6F6;    //此时app端无法改变页面背景色  
    }  
</style>

操作步骤：

  • 新建页面，在style标签中添加scoped

预期结果：

  • 页面颜色发生改变

实际结果：

  • 页面颜色无变化

bug描述：

在页面style标签中添加scoped后
写在page里的样式就不会生效。
在H5测试正常，在真机测试里则不会生效。


更多关于uni-app 【报Bug】style添加scoped后 app端page不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

遇到了同样的问题

更多关于uni-app 【报Bug】style添加scoped后 app端page不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，当在<style>标签上使用scoped属性时，App端确实无法通过page选择器设置页面背景色。这是因为：

  1. scoped样式原理：scoped属性会为组件中的样式自动添加唯一属性选择器（如data-v-xxx），这会导致page选择器被编译为类似page[data-v-xxx]的形式。
  2. App端限制：在App平台，page作为页面根节点，其样式作用机制与H5不同。App端无法将data-v-xxx属性绑定到page节点上，因此page[data-v-xxx]选择器无法匹配到实际节点，样式失效。

解决方案：

  • 移除scoped：如果只需设置页面背景色，可移除scoped属性，改用全局样式。
  • 使用page-meta：推荐通过page-meta组件动态设置页面样式（支持动态修改）：
    <template>
  <page-meta :page-style="`background-color: #F6F6F6;`"></page-meta>
</template>
回到顶部