uni-app中navigator标签在H5页面出现A标签嵌套导致书写样式错乱

uni-app中navigator标签在H5页面出现A标签嵌套导致书写样式错乱

操作步骤：

  • 自己去看

预期结果：

  • 取消a 标签 ， h5 用户JS 跳转过去不行？？ 非要 在添加一个A 标签？？

实际结果：

  • 取消a 标签 ， h5 用户JS 跳转过去不行？？ 非要 在添加一个A 标签？？

bug描述：

<navigator> 标签 在H5页面渲染 外层有A标签，， 使得小程序 和 H5 样式不统一， 这个不是最恶心的， 最恶心的是你们 更新了 工具后 编译后A 标签跑到了 <navigator> 标签里面。 导致 之前编写的样式 h5 在新本工具里面 到时样式错乱

image


更多关于uni-app中navigator标签在H5页面出现A标签嵌套导致书写样式错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app中navigator标签在H5页面出现A标签嵌套导致书写样式错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，navigator标签在H5页面中会被编译成<a>标签。如果你在navigator标签内部嵌套了其他<a>标签，可能会导致样式错乱或行为异常。这是因为HTML规范不允许<a>标签嵌套其他<a>标签。

解决方案

  1. 避免嵌套<a>标签： 确保不要在navigator标签内部嵌套其他<a>标签。如果你需要在navigator标签内部放置可点击的元素，可以使用<span>、<div>等标签，并通过JavaScript来处理点击事件。

    <navigator url="/pages/detail/detail">
  <div @click="handleClick">点击这里</div>
</navigator>

    export default {
  methods: {
    handleClick() {
      // 处理点击事件
    }
  }
}

  2. 使用<view>标签替代<a>标签： 如果你需要在navigator标签内部放置其他可点击的元素，可以使用<view>标签，并通过@click事件来处理点击逻辑。

    <navigator url="/pages/detail/detail">
  <view @click="handleClick">点击这里</view>
</navigator>

  3. 自定义样式： 如果你需要自定义样式，可以使用class或style来设置样式，而不是依赖默认的<a>标签样式。

    <navigator url="/pages/detail/detail" class="custom-link">
  点击这里
</navigator>

    .custom-link {
  text-decoration: none;
  color: #007AFF;
}

  4. 使用<button>标签： 如果你需要在navigator标签内部放置按钮，可以使用<button>标签，并通过@click事件来处理点击逻辑。

    <navigator url="/pages/detail/detail">
  <button @click="handleClick">点击这里</button>
</navigator>
回到顶部