<navigator class="user" url="/pages/login/login">
<image class="avatar-img" src="/static/images/avatar.png"></image>
<text class="user-info-mobile">请登录</text>
</navigator>
- 发布:2024-04-02 10:07
- 更新:2024-10-08 16:05
- 阅读:155
【报Bug】uni-navigator在内部包裹内容时在h5端和其他端有差异
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win11
HBuilderX类型: 正式
HBuilderX版本号: 4.07
浏览器平台: Chrome
浏览器版本: v123.0.6312.86
项目创建方式: HBuilderX
示例代码:
操作步骤:
运行到浏览器
运行到浏览器
预期结果:
<a class="navigator-wrap" href="/pages/login/login">
<uni-navigator data-v-2f1ef635="" class="user">
<uni-image data-v-2f1ef635="" class="avatar-img">
<div style="background-image: url('/static/images/avatar.png'); background-position: 0% 0%; background-size: 100% 100%"></div>
<span></span>
<img src="/static/images/avatar.png" draggable="false" />
</uni-image>
<uni-text data-v-2f1ef635="" class="user-info-mobile"><span>请登录</span></uni-text>
</uni-navigator>
</a>
<a class="navigator-wrap" href="/pages/login/login">
<uni-navigator data-v-2f1ef635="" class="user">
<uni-image data-v-2f1ef635="" class="avatar-img">
<div style="background-image: url('/static/images/avatar.png'); background-position: 0% 0%; background-size: 100% 100%"></div>
<span></span>
<img src="/static/images/avatar.png" draggable="false" />
</uni-image>
<uni-text data-v-2f1ef635="" class="user-info-mobile"><span>请登录</span></uni-text>
</uni-navigator>
</a>
实际结果:
<uni-navigator data-v-2f1ef635="" class="user">
<a class="navigator-wrap" href="/pages/login/login">
<uni-image data-v-2f1ef635="" class="avatar-img">
<div style="background-image: url('/static/images/avatar.png'); background-position: 0% 0%; background-size: 100% 100%"></div>
<span></span>
<img src="/static/images/avatar.png" draggable="false" />
</uni-image>
<uni-text data-v-2f1ef635="" class="user-info-mobile"><span>请登录</span></uni-text>
</a>
</uni-navigator>
<uni-navigator data-v-2f1ef635="" class="user">
<a class="navigator-wrap" href="/pages/login/login">
<uni-image data-v-2f1ef635="" class="avatar-img">
<div style="background-image: url('/static/images/avatar.png'); background-position: 0% 0%; background-size: 100% 100%"></div>
<span></span>
<img src="/static/images/avatar.png" draggable="false" />
</uni-image>
<uni-text data-v-2f1ef635="" class="user-info-mobile"><span>请登录</span></uni-text>
</a>
</uni-navigator>
bug描述:
uniapp内置组件uni-navigator 在web端的dom层级和其他端有差别导致,我在uni-navigator内嵌套的子组件样式异常
在代码写法
<navigator class="user" url="/pages/login/login">
<image class="avatar-img" src="/static/images/avatar.png"></image>
<text class="user-info-mobile">请登录</text>
</navigator>
因为我在user设置了flex垂直布局,所以内部组件应该是垂直的。正确显示应该如下
但是,在h5端显示如下
查看源码似乎是因为h5特地在uni-navigator内部再嵌套了一层a标签 class="navigator-wrap"!
文档只写着“Vue3 项目因 SSR 需要,H5 端会在外层嵌套 a 标签” 希望能详细改下文档
因为我理解这不是在uni-navigator外层,而是在uni-navigator内部的组件会额外包裹一层!
2 个回复
h***@163.com
版本升级后我也有这个问题,导致之前的代码样式全乱了。
c***@qq.com (作者)
唉几个月都没人回复