nvue页面注意事项

最新推荐文章于 2025-06-13 11:28:29 发布

原创最新推荐文章于 2025-06-13 11:28:29 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3 #web #java

本文介绍nvue页面的布局限制，包括必须使用flex布局、不支持百分比布局、仅支持class选择器等情况，并提供了正确的样式书写方式。此外还提到了nvue页面控制显示隐藏的方式以及页面元素的选择器修改建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.nvue 页面只能使用 flex 布局

2.布局不能使用百分比、没有媒体查询。

3.选择器仅支持class 选择器

/* 错误 */
#id {}
.a .b .c {}
.a > .b {}

/* 正确 */
.class {}

border 不支持简写

/* 错误 */
.class {
    border: 1px red solid;
}

/* 正确 */
.class {
    border-width: 1px;
    border-style: solid;
    border-color: red;
}

background 不支持简写

/* 错误 */
.class {
    background: red;
}

/* 正确 */
.class {
    background-color: red;
}

/* 错误 */
/*  控制台警告：
WARNING: `border` is not a standard property name (may not be supported)  
WARNING: `-webkit-transform` is not a standard property name (may not be supported)
*/
.class {
    border: 1px red solid;
  -webkit-transform: scaleY(.5);
}

/* 正确 */
.class {
    border-width: 1px;
    border-style: solid;
    border-color: red;
  /* #ifndef APP-PLUS-NVUE */
  -webkit-transform: scaleY(.5);
  /* #endif*/
}

4.nvue 页面控制显隐只可以使用v-if不可以使用v-show5.h5正常app异常body的元素选择器请改为page，同样，div和ul和li等改为view、span和font改为text、a改为navigator、img改为image...6.uni-app开发中遇到的问题 https://www.cnblogs.com/nanyang520/p/11758187.html