----/前端源码/uni-app/UI-FIXES.md

UI 显示问题修复总结

修复内容

1. TabBar 图标不显示 ✅

问题：使用 <image> 标签（uni-app 组件）在 H5 环境中不显示 解决方案：将所有图标改为直接使用 <svg> 标签

修改的图标组件：

• HomeIcon.vue - 首页图标
• TestIcon.vue - 测名图标
• NamingIcon.vue - 起名图标
• RenamingIcon.vue - 改名图标
• ProfileIcon.vue - 我的图标

优势：

• SVG 直接渲染，无需加载外部资源
• 支持 currentColor，可以继承父元素颜色
• 更好的性能和兼容性

2. 轮播图挤在一起 ✅

问题：使用 <swiper> 组件（uni-app 组件）在 H5 环境中显示异常 解决方案：使用纯 CSS 动画实现垂直滚动效果

实现方式：

.home-notification-scroll {
  display: flex;
  flex-direction: column;
  animation: scroll-vertical 10s linear infinite;
}

@keyframes scroll-vertical {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

特性：

• 垂直滚动动画
• 10秒完成一轮循环
• 圆点呼吸动画效果
• 自动无限循环

3. TabBar 样式优化 ✅

修改：

• 高度：80rpx → 60px
• 图标大小：48rpx → 32px
• 字体大小：24rpx → 12px
• 间距：10rpx → 5px

4. 轮播图样式优化 ✅

修改：

• 容器高度：40rpx → 24px
• 内边距：20rpx 24rpx → 12px 16px
• 圆点大小：16rpx → 8px
• 添加圆点呼吸动画

技术要点

SVG 图标使用

<template>
  <svg
    :width="size"
    :height="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path stroke="currentColor" ... />
  </svg>
</template>

CSS 动画轮播

• 使用 transform: translateY() 实现垂直滚动
• animation: scroll-vertical 10s linear infinite 无限循环
• 容器 overflow: hidden 隐藏溢出内容

测试验证

刷新页面后应该看到：

1. ✅ 底部 TabBar 显示 5 个图标（首页、测名、起名、改名、我的）
2. ✅ 图标颜色正确（未选中灰色，选中红色）
3. ✅ 轮播消息垂直滚动，不再挤在一起
4. ✅ 圆点有呼吸动画效果
5. ✅ 点击 TabBar 可以切换页面

浏览器兼容性

• ✅ Chrome/Edge (现代浏览器)
• ✅ Firefox
• ✅ Safari
• ✅ 移动端浏览器

注意事项

1. 所有图标使用 SVG，确保清晰度
2. 使用 currentColor 继承父元素颜色
3. CSS 动画性能优秀，无需 JavaScript
4. 所有单位使用 px，避免 rpx 转换问题

如果问题仍然存在

1. 硬刷新浏览器（Ctrl+Shift+R 或 Cmd+Shift+R）
2. 清除浏览器缓存
3. 检查浏览器控制台是否有错误
4. 确认开发服务器已重启