关于微信小程序tabBAr在iphone手机版本11.0.0以下，图片文字不显示的问题，完美解决方法

关于微信小程序tabBAr在iphone手机版本11.0.0以下，图片文字不显示的问题，完美解决方法

解决前

解决后

原先tabbar是这么写的

"tabBar": {
    "custom": true,
    "color": "#000",
    "selectedColor": "#f00",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的"
      },
      {
        "pagePath": "pages/adt/bill/bill",
        "text": "账单"
      },
      {
        "pagePath": "pages/adt/billyears/billyears",
        "text": "账单"
      }
    ]
  },

1.解决文字不展示的问题

只要把设置颜色的地方改成16进制颜色，并且六位要写全，之后就显示正常了。必须是6位，不能简写

正确代码

 "tabBar": {
    "custom": true,
    "color": "#7A7E83",
    "selectedColor": "#2FC9CD",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的"
      },
      {
        "pagePath": "pages/adt/bill/bill",
        "text": "账单"
      },
      {
        "pagePath": "pages/adt/billyears/billyears",
        "text": "账单"
      }
    ]
  },

2.解决tabBAr图片不展示的问题

在iphone手机版本11.0.0以下，不支持小程序的cover-view cover-image标签 只需要改为view image标签就OK啦

<cover-view class="tab-bar" wx:if="{{showTabbar}}">
  <cover-view class="tab-bar-border"></cover-view>
  <block> 
    <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-key="{{item.key}}" bindtap="switchTab">
      <cover-image width="48rpx" height="48rpx" src="{{selected === item.key ? item.selectedIconPath : item.iconPath}}"></cover-image>
      <cover-view style="color: {{selected === item.key ? selectedColor : color}}">{{item.text}}</cover-view>
    </cover-view>
  </block>
</cover-view>

解决后代码

<view class="tab-bar" wx:if="{{showTabbar}}">
  <view class="tab-bar-border"></view>
  <block> 
    <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-key="{{item.key}}" bindtap="switchTab">
      <image style="width:48rpx;height:48rpx;" src="{{selected === item.key ? item.selectedIconPath : item.iconPath}}"></image>
      <view style="color: {{selected === item.key ? selectedColor : color}}">{{item.text}}</view>
    </view>
  </block>
</view>

喜欢的记得点赞啊，希望可以帮到你，欢迎打赏