自定义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并不会显示出来。
这个问题,暂时还没有找到解决的方法