c***@qq.com
c***@qq.com
  • 发布:2024-04-02 10:07
  • 更新:2024-04-02 10:07
  • 阅读:41

【报Bug】uni-navigator在内部包裹内容时在h5端和其他端有差异

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win11

HBuilderX类型: 正式

HBuilderX版本号: 4.07

浏览器平台: Chrome

浏览器版本: v123.0.6312.86

项目创建方式: HBuilderX

示例代码:
          <navigator   class="user" url="/pages/login/login">  
              <image class="avatar-img" src="/static/images/avatar.png"></image>  
              <text class="user-info-mobile">请登录</text>  
          </navigator>

操作步骤:

运行到浏览器

预期结果:
<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>

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内部的组件会额外包裹一层!

2024-04-02 10:07 负责人:无 分享
已邀请:

要回复问题请先登录注册