uni-app中uni-breadcrumb分隔符小程序端不显示

uni-app中uni-breadcrumb分隔符小程序端不显示

Image

Image

12 回复

bug 已确认，感谢您的反馈！

更多关于uni-app中uni-breadcrumb分隔符小程序端不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


bug还是存在的,怎么解决?

回复 2***@qq.com: 导入示例不显示分隔符？

回复 DCloud_UNI_WZF: 是的

回复 DCloud_UNI_WZF: 只有字显示,分隔符不显示

回复 2***@qq.com: 发一下您导入示例的demo，这边测试是可以的

回复 DCloud_UNI_WZF: demo怎么发给你

回复 2***@qq.com: 上传附件

好了,你看一下

我上面说的是点击插件市场导入示例项目，如果官方的示例没有问题，就检查自己的代码是否有问题
另外，提供可复现demo请提供一个简单可直接运行的demo
.header text {
position: absolute;
top: 100upx;
left: 300upx;
color: #fff;
} 这里的代码把分隔符样式搞丢了

好的感谢,我没想到下面写的还能把组件的覆盖掉

在 uni-app 中使用 uni-breadcrumb 组件时，如果在小程序端分隔符不显示，可能是由于以下几个原因：

1. 样式问题

小程序端的样式可能与 H5 或 App 端不同，导致分隔符没有正确显示。你可以尝试自定义分隔符的样式。

<template>
  <uni-breadcrumb separator="/">
    <uni-breadcrumb-item to="/">首页</uni-breadcrumb-item>
    <uni-breadcrumb-item to="/about">关于我们</uni-breadcrumb-item>
    <uni-breadcrumb-item>联系我们</uni-breadcrumb-item>
  </uni-breadcrumb>
</template>

<style scoped>
/* 自定义分隔符样式 */
.uni-breadcrumb__separator {
  color: #333; /* 设置分隔符颜色 */
  margin: 0 5px; /* 设置分隔符间距 */
}
</style>

2. 分隔符属性未正确设置

确保你在 uni-breadcrumb 组件中正确设置了 separator 属性。

<uni-breadcrumb separator="/">
  <uni-breadcrumb-item to="/">首页</uni-breadcrumb-item>
  <uni-breadcrumb-item to="/about">关于我们</uni-breadcrumb-item>
  <uni-breadcrumb-item>联系我们</uni-breadcrumb-item>
</uni-breadcrumb>

3. 小程序端兼容性问题

某些小程序平台（如微信小程序）可能对某些 CSS 属性的支持不完全，导致分隔符不显示。你可以尝试使用 ::before 或 ::after 伪元素来手动添加分隔符。

<template>
  <view class="custom-breadcrumb">
    <view class="breadcrumb-item" @click="navigateTo('/')">首页</view>
    <view class="breadcrumb-separator">/</view>
    <view class="breadcrumb-item" @click="navigateTo('/about')">关于我们</view>
    <view class="breadcrumb-separator">/</view>
    <view class="breadcrumb-item">联系我们</view>
  </view>
</template>

<style scoped>
.custom-breadcrumb {
  display: flex;
  align-items: center;
}

.breadcrumb-item {
  cursor: pointer;
}

.breadcrumb-separator {
  margin: 0 5px;
}
</style>

<script>
export default {
  methods: {
    navigateTo(path) {
      uni.navigateTo({
        url: path
      });
    }
  }
}
</script>

4. 检查 uni-breadcrumb 版本

确保你使用的 uni-breadcrumb 组件是最新版本，旧版本可能存在一些兼容性问题。你可以通过 npm 或 yarn 更新 uni-ui 组件库。

npm update @dcloudio/uni-ui

或者

yarn upgrade @dcloudio/uni-ui

5. 使用自定义组件

如果以上方法都无法解决问题，你可以考虑自己实现一个面包屑组件，完全控制其样式和行为。

<template>
  <view class="custom-breadcrumb">
    <view v-for="(item, index) in items" :key="index" class="breadcrumb-item">
      <text v-if="index !== 0" class="separator">/</text>
      <text @click="navigateTo(item.path)">{{ item.name }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '首页', path: '/' },
        { name: '关于我们', path: '/about' },
        { name: '联系我们', path: '/contact' }
      ]
    };
  },
  methods: {
    navigateTo(path) {
      uni.navigateTo({
        url: path
      });
    }
  }
};
</script>

<style scoped>
.custom-breadcrumb {
  display: flex;
  align-items: center;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.separator {
  margin: 0 5px;
}
</style>
回到顶部