ios9环境 微信7.05环境下 自定义tabbar不显示按钮和文字
发布于 7 年前 作者 hcao 851 次浏览 来自 官方Issues

自定义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并不会显示出来。

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




回到顶部