解决小程序在iPhone上tabbar的文字显示不出的问题

最新推荐文章于 2024-01-27 19:06:14 发布

原创最新推荐文章于 2024-01-27 19:06:14 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

Taro 专栏收录该内容

4 篇文章

订阅专栏

在小程序开发中，遇到一个iPhone设备上TabBar文字显示异常的问题。经过排查，发现是颜色设置不完整导致的。解决方案是将颜色值改为16进制并确保颜色代码完整，从而解决了TabBar在iOS上的显示问题。

最近开发的小程序已经上线，手机端和微信开发者工具没有问题，但是同事用苹果手机测试发现tabbar显示有问题，可以点击，但是点击另一个其他的就没了，如图在这里插入图片描述
找了很多地方，在社区翻了半天也没有看到合适的解答。后面终于发现了问题所在，做一个记录。

原先tabbar是这么写的

 tabBar: {
      color: "gray",
      selectedColor: "#6e9eea",
      backgroundColor: "#fff",
      borderStyle: "black",
      list: [
        {
          pagePath: "pages/home/homeView",
          text: "首页"
          // iconPath: "",
          // selectedIconPath: ""
        },
        {
          pagePath: "pages/home/homeWithdrawView",
          text: "交易查询"
          // iconPath: "",
          // selectedIconPath: ""
        },
        {
          pagePath: "pages/home/homeMeView",
          text: "我的"
          // iconPath: "",
          // selectedIconPath: ""
        }
      ]
    },

现在的代码：

tabBar: {
      color: "#808080",
      selectedColor: "#6e9eea",
      backgroundColor: "#ffffff",
      borderStyle: "black",
      list: [
        {
          pagePath: "pages/home/homeView",
          text: "首页"
          // iconPath: "",
          // selectedIconPath: ""
        },
        {
          pagePath: "pages/home/homeWithdrawView",
          text: "交易查询"
          // iconPath: "",
          // selectedIconPath: ""
        },
        {
          pagePath: "pages/home/homeMeView",
          text: "我的"
          // iconPath: "",
          // selectedIconPath: ""
        }
      ]
    },