React微信小程序自定义tabbar

下方tabbar因其特殊性，现在需要实现自定义

1.以前定义的config中的tabbar下的custom设置改为false

bash 复制代码

"tabBar": {
   "custom": true,
    "color": "#b5b5b5",
    "selectedColor": "#000",
    "backgroundColor": "#fff",
    "borderStyle": "white",
    "list": [
        {
            "pagePath": "pages/home/index",
            "text": "首页",
            "iconPath": "resources/images/tabs/home.png",
            "selectedIconPath": "resources/images/tabs/home-active.png"
        },
        {
            "pagePath": "pages/achievement/index",
            "text": "业绩",
            "iconPath": "resources/images/tabs/achievement.png",
            "selectedIconPath": "resources/images/tabs/achievement_active.png"
        }
    ]
},

2.自己封装一个组件custom-tab-bar文件

index.tsx

bash 复制代码

import Taro, { Component } from '@tarojs/taro';
import { Image, Text, View } from '@tarojs/components';
import { inject, observer } from '@tarojs/mobx';
import { CusTomTabBarPageType } from '@/interfaces';
import ICON_HOME from '@/resources/images/tabs/home.png';
import ICON_HOME_ACTIVE from '@/resources/images/tabs/home-active.png';
import ICON_ACHIEVEMENT from '@/resources/images/tabs/achievement.png';
import ICON_ACHIEVEMENT_ACTIVE from '@/resources/images/tabs/achievement_active.png';
import ICON_CONSUME from '@/resources/images/tabs/consume.png';
import './index.scss';

interface CusTomTabBarProps {
    pageType: CusTomTabBarPageType;
}

const prefix = 'custom-tab-tab';
const innerClassNames = {
    consume: `${prefix}__consume`,
    tabs: `${prefix}__tabs`,
    tab: `${prefix}__tab`,
    tabImg: `${prefix}__tab__img`,
    tabName: `${prefix}__tab__name`,
    tabConsume: `${prefix}__tab__consume`,
    tabConsumeImg: `${prefix}__tab__consume__img`
};

/**
 * 导购员信息
 */
@inject('guideStore', 'consumeStore')
@observer
export default class CusTomTabBar extends Component<CusTomTabBarProps, {}> {
    constructor(props) {
        super(props);
    }

    /**
     * 是否展示tab公用核销入口
     */
    getShowConsume() {
        return true;
    }

    onClickTab = (path: string) => {
        Taro.switchTab({
            url: path
        });
    };

    onClickConsume = async () => {
        //核销方法
    };
    

    render() {
        const { pageType } = this.props;
        const showConsume = this.getShowConsume();
        const homeUrl = '/pages/home/index';
        const achievementUrl = '/pages/achievement/index';
        const tabStyle = {
            width: showConsume ? `${100 / 3}%` : `${100 / 2}%`
        };
        return (
            <View className={prefix}>
                <View className={innerClassNames.tabs}>
                    <View
                        className={innerClassNames.tab}
                        style={tabStyle}
                        onClick={this.onClickTab.bind(this, homeUrl)}
                    >
                        <Image
                            className={innerClassNames.tabImg}
                            src={
                                pageType === CusTomTabBarPageType.Home
                                    ? ICON_HOME_ACTIVE
                                    : ICON_HOME
                            }
                        />
                        <Text
                            className={innerClassNames.tabName}
                            style={{
                                color:
                                    pageType === CusTomTabBarPageType.Home
                                        ? '#000'
                                        : undefined
                            }}
                        >
                            首页
                        </Text>
                    </View>
                    {showConsume && (
                        <View className={innerClassNames.tab} style={tabStyle}>
                            <View
                                className={innerClassNames.tabConsume}
                                onClick={this.onClickConsume}
                            >
                                <Image
                                    className={innerClassNames.tabConsumeImg}
                                    src={ICON_CONSUME}
                                />
                            </View>
                        </View>
                    )}
                    <View
                        className={innerClassNames.tab}
                        style={tabStyle}
                        onClick={this.onClickTab.bind(this, achievementUrl)}
                    >
                        <Image
                            className={innerClassNames.tabImg}
                            src={
                                pageType === CusTomTabBarPageType.Achievement
                                    ? ICON_ACHIEVEMENT_ACTIVE
                                    : ICON_ACHIEVEMENT
                            }
                        />
                        <Text
                            className={innerClassNames.tabName}
                            style={{
                                color:
                                    pageType ===
                                    CusTomTabBarPageType.Achievement
                                        ? '#000'
                                        : undefined
                            }}
                        >
                            业绩
                        </Text>
                    </View>
                </View>
            </View>
        );
    }
}

index.scss

bash 复制代码

.custom-tab-tab {
    &__tabs {
        display: flex;
        flex-direction: row;
    }
    &__tabs {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0 20px 0;
        width: 100%;
        background-color: #fff;
    }
    &__tab {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        height: 100px;
        &__img {
            width: 48px;
            height: 48px;
        }
        &__name {
            font-size: 20px;
            font-weight: bold;
            color: rgba(0, 0, 0, 0.32);
        }
        &__consume {
            position: absolute;
            top: -40rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 120px;
            height: 120px;
            border-radius: 100px;
            background: linear-gradient(114deg, #e1ba8b 1.76%, #ba8848 84.66%);
            box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.15);
            &__img {
                width: 64px;
                height: 64px;
            }
        }
    }
}

3.对应的tab页面引用

bash 复制代码

<View className='home'>
    <ScrollView scrollY className='home__scroll'>
        <View className='home-page'></View>
    </ScrollView>
    <CusTomTabBar pageType={CusTomTabBarPageType.Home} />
</View>

.home {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f6f6f6;
    &__scroll {
        flex: 1;
        overflow-x: auto;
    }
}
.home-page {
    padding: 20px;
}

希望对大家有帮助～ ❤️