使用taro开发
发现在iphone 6plus 第一次加载首页是可以显示 Tabbar,跳转到其它页面返回首页经常Tabbar不显示。只能从重新刷新小程序才能显示。
下面是自定义tabbar组件
import Taro, { Component, Config } from '@tarojs/taro';
import { CoverView, CoverImage, View, Image } from '@tarojs/components';
import './index.scss';
import { observer, inject } from '@tarojs/mobx';
import { ShopCartMod } from '@/stores';
import SvgCart from '@/assets/svg/tab/cart.svg';
import SvgCartA from '@/assets/svg/tab/cart_a.svg';
import SvgHome from '@/assets/svg/tab/home.svg';
import SvgHomeA from '@/assets/svg/tab/home_a.svg';
import SvgMine from '@/assets/svg/tab/mine.svg';
import SvgMineA from '@/assets/svg/tab/mine_a.svg';
import SvgLive from '@/assets/svg/tab/live.svg';
import SvgLiveA from '@/assets/svg/tab/live_a.svg';
type PageProps = {
initMod: InitMod;
shopCartMod: ShopCartMod;
};
@inject('initMod')
@inject('shopCartMod')
@observer
export default class StoreHome extends Component<PageProps, any> {
constructor(props) {
super(props);
this.state = {
color: '#333333', // #7A7E83
selectedColor: '#3cc51f',
borderStyle: 'black',
backgroundColor: '#ffffff',
list: [
{
pagePath: 'pages/index/index',
text: '商城',
selectedIconPath: SvgHomeA,
iconPath: SvgHome,
},
{
pagePath: 'pages/live/LiveList',
text: '直播列表',
selectedIconPath: SvgLiveA,
iconPath: SvgLive,
},
{
pagePath: 'pages/shop/shop-cart/ShopCart',
text: '购物车',
requestLogin: true,
selectedIconPath: SvgCartA,
iconPath: SvgCart,
},
{
pagePath: 'pages/shop/mine/Mine',
text: '我的',
requestLogin: true,
selectedIconPath: SvgMineA,
iconPath: SvgMine,
},
],
};
}
switchTab = (data, index) => {
// 没有token的话,则跳转到登录页
if (data.requestLogin && !this.props.initMod.token) {
Taro.navigateTo({ url: '/page-member/pages/auth/login/Login' });
return;
}
Taro.switchTab({ url: '/' + data.pagePath });
this.props.initMod.changeSelectedTab(index);
};
render() {
const { list, selectedColor, color } = this.state;
const { selectedTab } = this.props.initMod;
return (
<View className='tab-bar'>
<View className='tab-bar-border'></View>
{list.map((item, index) => {
return (
<View
key={'tabbar' + index}
className='tab-bar-item'
onClick={() => {
this.switchTab(item, index);
}}>
<Image className='image' src={selectedTab === index ? item.selectedIconPath : item.iconPath}></Image>
<View
className='text'
style={{
color: selectedTab === index ? selectedColor : color,
}}>
{item.text}
</View>
</View>
);
})}
</View>
);
}
}
样式文件
@import '../assets/css/common.scss';
.tab-bar {
z-index: 1000;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: $size-tabbar;
background: white;
display: flex;
padding-bottom: env(safe-area-inset-bottom);
.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;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.image {
width: 50px;
height: 50px;
margin-bottom: 4px;
}
.text {
font-size: 20px;
}
}
}
麻烦提供一下该机型的系统版本,和能复现问题代码片段((https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html))