| | |
| | | icon: string; |
| | | activeIcon: string; |
| | | pagePath: string; |
| | | currentPath: string; |
| | | active: boolean; |
| | | className: string; |
| | | onClick?: (url: string, index: number) => any; |
| | |
| | | |
| | | const TarBarItem = function (props: TarBarItemProps, context: SetupContext<TarBarItemEvents>) { |
| | | const _badge = props.badge > 99 ? '99+' : props.badge; |
| | | const isActive = props.currentPath.toLowerCase().includes(props.pagePath.toLowerCase()); |
| | | return ( |
| | | <div |
| | | class={['bottom-tab-item', { active: props.active }, props.className]} |
| | | class={['bottom-tab-item', { active: isActive }, props.className]} |
| | | onClick={() => context.emit('click', props.pagePath, props.index)} |
| | | > |
| | | <div class="bottom-tab-item-icon-wrapper"> |
| | | {props.badge > 0 && <div class="bottom-tab-item-badge">{_badge}</div>} |
| | | <img class="bottom-tab-item-icon" src={props.active ? props.activeIcon : props.icon} /> |
| | | <img class="bottom-tab-item-icon" src={isActive ? props.activeIcon : props.icon} /> |
| | | </div> |
| | | <div class="bottom-tab-item-text">{props.text}</div> |
| | | </div> |
| | |
| | | } |
| | | return; |
| | | } |
| | | system.setTabIndex(index); |
| | | Taro.switchTab({ url }); |
| | | Taro.switchTab({ url }).then(() => { |
| | | system.setTabIndex(index); |
| | | }); |
| | | }; |
| | | |
| | | function goPublish() { |
| | |
| | | icon="../assets/tabbar/icon-home.png" |
| | | activeIcon="../assets/tabbar/icon-home-active.png" |
| | | pagePath={TabBarPageRouter.Home} |
| | | currentPath={router.path} |
| | | index={0} |
| | | active={system.activeTab === 0} |
| | | className="home" |
| | |
| | | icon="../assets/tabbar/icon-task.png" |
| | | activeIcon="../assets/tabbar/icon-task-active.png" |
| | | pagePath={TabBarPageRouter.Workbenches} |
| | | currentPath={router.path} |
| | | active={system.activeTab === 1} |
| | | className="task" |
| | | onClick={switchTab} |
| | |
| | | icon="../assets/tabbar/icon-mine.png" |
| | | activeIcon="../assets/tabbar/icon-mine-active.png" |
| | | pagePath={TabBarPageRouter.Mine} |
| | | currentPath={router.path} |
| | | active={system.activeTab === 2} |
| | | className="mine" |
| | | onClick={switchTab} |