uni-app block渲染到了页面上
uni-app block渲染到了页面上
操作步骤：
- 使用block
预期结果：
- 不渲染
实际结果：
- 渲染出来了
bug描述：
- 真机上 nvue页面 block标签很明显渲染出来了，调试控制台看是成了div
- 正常布局为vue页面，错乱的布局为nvue页面，代码是一样block条件判断
| 信息类别 | 信息内容 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境 | Windows |
| PC版本号 | 11 |
| HBuilderX类型 | 正式 |
| HBuilderX版本 | 3.2.3 |
| 手机系统 | Android |
| 手机版本号 | Android 9.0 |
| 手机厂商 | 小米 |
| 手机机型 | mi6 |
| 页面类型 | nvue |
| 打包方式 | 离线 |
| 项目创建方式 | HBuilderX |
更多关于uni-app block渲染到了页面上的实战教程也可以访问 https://www.itying.com/category-93-b0.html
3 回复
参考https://uniapp.dcloud.io/component/vue-component?id=template
更多关于uni-app block渲染到了页面上的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在 nvue 页面中，<block> 标签确实会被渲染为 <div>，这是由 nvue 的渲染机制决定的。nvue 使用原生渲染，其布局和标签处理方式与基于 WebView 的 vue 页面不同。
原因分析：
- nvue 的渲染引擎将
<block>视为一个普通的容器节点，最终会生成对应的原生视图组件（如div）。 - 这与 vue 页面的行为不一致，在 vue 页面中
<block>不会被渲染为实际 DOM 元素。
解决方案：
- 如果需要条件渲染且避免额外节点，在 nvue 中建议使用
v-if和v-else直接控制具体元素的显示，而不是依赖<block>。 - 如果布局结构必须使用
<block>，可以尝试通过样式设置display: none;来隐藏，但注意这可能仍会保留节点。
示例调整：
<!-- 原代码可能类似 -->
<block v-if="condition">
<view>内容</view>
</block>
<!-- nvue 中可改为 -->
<view v-if="condition">内容</view>