阅读 50

使用taro开发微信小程序如何使用官网的custom-tab-bar

根据登录用户的角色,展示不同的TabBar

第一步:
在src目录下创建custom-tab-bar文件夹,然后创建index.jsx和index.scss
42ac627d-a722-4a26-a610-5df5dd84e559-image.png

index.jsx

import Taro, { PureComponent } from '@tarojs/taro';
import { CoverView, CoverImage } from '@tarojs/components';
import './index.scss';

export default class TabBar extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selected: 0,
      color: '#333',
      selectedColor: '#0e408f',
      list: [],
    };
  }

  componentDidMount() {
    const app = Taro.getApp();
    this.setState({
      list: app.config.globalData.list
    });
  }

  switchTab(index) {
    const { list } = this.state;
    Taro.switchTab({
      url: list[index].pagePath
    });
    this.setState({
      selected: index
    });
  };

  render() {
    const { list } = this.state;
    return (
      <CoverView className='tab-bar'>
        <CoverView className='tab-bar-border' />
        {
          list.length && list.map((item, index) => {
            return (
              <CoverView key={index} className='tab-bar-item' onClick={this.switchTab.bind(this, index)}>
                <CoverImage className='icon' src={selected === index ? item.selectedIconPath : item.iconPath} />
                <CoverView className='text'>{item.text}</CoverView>
              </CoverView>
            );
          })
        }
      </CoverView>
    );
  }
}
复制代码

index.scss

.tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 96px;
	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: 2px;
		transform: scaleY(0.5);
	}
	.tab-bar-item {
		flex: 1;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		.icon {
			width: 54px;
			height: 54px;
		}
		.text {
			font-size: 20px;
		}
	}
}

复制代码

第二步
修改app.jsx里面的关于tabbar的配置custom设置true,添加globalData
1c84a8c0-3e64-465c-9128-a39deed949e0-image.png

第三步
在登录成功的地方设置一下list

const app = Taro.getApp();
app.config.globalData.list = [
          {
            pagePath: '/pages/shop/index',
            text: '商店',
            iconPath: '../asset/images/tab/shop.png',
            selectedIconPath: '../asset/images/tab/shop_active.png'
          }, {
            pagePath: '/pages/stock/index',
            text: '库存',
            iconPath: '../asset/images/tab/stock.png',
            selectedIconPath: '../asset/images/tab/stock_active.png'
          }, {
            pagePath: '/pages/coach/index',
            text: '教练',
            iconPath: '../asset/images/tab/coach.png',
            selectedIconPath: '../asset/images/tab/coach_active.png'
          }, {
            pagePath: '/pages/user/index',
            text: '我',
            iconPath: '../asset/images/tab/user.png',
            selectedIconPath: '../asset/images/tab/user_active.png'
          }
        ];
复制代码

第四步
在每个有tabbar的页面的componentDidShow生命周期调用以下方法

setTabBar = () => {
    if (typeof this.$scope.getTabBar === 'function' && this.$scope.getTabBar) {
      this.$scope.getTabBar().setData({
        selected: 0 //当前tab对应的索引
      })
    }
  };复制代码


关注下面的标签,发现更多相似文章
评论