收藏
回答

ios9环境 微信7.05环境下 自定义tabbar不显示按钮和文字

自定义tabbar官方示例

https://developers.weixin.qq.com/s/jiSARvmF7i55

一:自定义tabbar不显示按钮和文字

引起的原因是index.wxss 里面的

flex-direction: column; 

ios 9好像应该是不支持的,去掉之后,就能显示了。


.tab-bar-item {

 flex: 1;

 text-align: center;

 justify-content: center;

 align-items: center;

 /* flex-direction: column; */

}

二:如果遇上有列表,并且列表长度超过手机屏幕,就是存在可以滚动的情况下,屏幕滑动的时候,

固定在底部的tabbar会到处乱动,并且在ios9环境下,并不会复位,经常卡在中间位置。

个人感觉是cover-view 和cover-image在低版本苹果上,并不兼容。

后来 直接把

cover-view   更换为原始的view

cover-image更换为原始的image 后,效果才变好。


附上一份,修改后的wxss

//index.wxss


.cover-view{

 display:block;

 line-height:1.2;

 overflow:hidden;

 white-space:nowrap;

 pointer-events:auto;

 font-family:-apple-system;

}

.tab-bar {

 position: fixed;

 bottom: 0;

 left: 0;

 width:100%;

 height: 48px;

 background: #f6f6f6;

 display: flex;

 z-index:2000;

 padding-bottom: env(safe-area-inset-bottom);

 -webkit-transform: translateZ(0);

 transform:translateZ(0);

}


.tab-bar-border {

 background-color: rgba(0, 0, 0, 0.33);

 position: absolute;

 left: 0;

 top: 0;

 width: 100%;

 height: 1px;

 transform: scaleY(0.5);

}


.tab-bar-item {

 flex: 1;

 text-align: center;

 justify-content: center;

 align-items: center;

 /* flex-direction: column; */

}


.tab-bar-item-image {

 width: 27px;

 height: 27px;

 margin:0 auto;

 margin-top:4px;

 margin-bottom:2px;

 display:block;



}


.tab-bar-item-view {

 font-size: 10px;

 width:100%;

 text-align:center;


}


//index.wml

<!--miniprogram/custom-tab-bar/index.wxml-->


<view class="cover-view tab-bar  ">

 <view class="cover-view tab-bar-border "></view>


 <view wx:for="{{list}}"  wx:key="index" class="cover-view tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">

   <image class="tab-bar-item-image" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>

   <view class="cover-view tab-bar-item-view " style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>

 </view>


</view>


三:ios9手机上,跳转至别的小程序,然后点击右上角的关闭后,会自动返回上一个小程序。

此时,被返回的小程序界面上,自定义的tabbar并不会显示出来。

这个问题,暂时还没有找到解决的方法






回答关注问题邀请回答
收藏

3 个回答

  • 如空气般存在
    如空气般存在
    2020-04-20

    终于找到原因了,非常感谢

    2020-04-20
    有用
    回复
  • a栀子
    a栀子
    2020-04-15

    赞一个,差点被搞疯掉,结果是版本不兼容

    2020-04-15
    有用
    回复
  • Nul
    Nul
    2020-03-12

    赞一个 ios9 确实不显示官方的示例tabBar组件,感谢分享~~~

    2020-03-12
    有用
    回复
登录 后发表内容
问题标签