收藏
回答

iphone 6 plus 自定义tabbar经常加载空白

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug 自定义Tab 微信iOS客户端 7.0.12 2.11.2

使用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;
    }
  }
}


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

1 个回答

登录 后发表内容
问题标签