首页 > 建站教程 > 小程序、公众号 >  uni-app page选择器加上scope后样式消失正文

uni-app page选择器加上scope后样式消失

在使用uni-app时,需要对整个页面加上背景:

1<style scope>
2  page {
3    background-color: lightgreen;
4  }
5</style>


这种写法,在编译成app和H5都没问题,但是到了小程序就无效了。这是因为uniapp中的页面,并非最终原生小程序中的页面。在HBuilderX 在对源码编译过程中,uniapp中的页面外部会包裹上page。简单说就是page是uniapp页面的父节点。在子节点上设置了 scoped ,父节点肯定就无法选中了。


知道了原因,解决办法很简单,就是把scope去掉:

1<style>
2  page {
3    background-color: lightgreen;
4  }
5</style>


但是这么写,会影响其他页面,所以也可以搞个宽高100%的容器,再加背景:

1<style scope>
2  .wrap {
3    width: 750rpx;
4    height: 100vh;
5    background-color: lightgreen;
6  }
7</style>