1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
| import { useState, useEffect } from "react"; import { switchTab, getCurrentPages } from "@tarojs/taro"; import { CoverView, CoverImage } from "@tarojs/components";
import tabbar_home_on from "../images/tabbar_home_on.png"; import tabbar_home from "../images/tabbar_home.png"; import tabbar_mine_on from "../images/tabbar_mine_on.png"; import tabbar_mine from "../images/tabbar_mine.png";
import "./index.scss";
const tabbarConfig = { color: "#000000", selectedColor: "#DC143C", list: [ { pagePath: "/pages/home/index", selectedIconPath: tabbar_home_on, iconPath: tabbar_home, text: "", }, { pagePath: "/pages/mine/index", selectedIconPath: tabbar_mine_on, iconPath: tabbar_mine, text: "", }, ], };
function CustomTabBar() { const { list, color, selectedColor } = tabbarConfig; const pages = getCurrentPages(); const currentPage = pages[0]; const [selected, setselected] = useState(0);
useEffect(() => { const index = list.findIndex( (item) => item.pagePath === "/" + currentPage.route ); if (index > -1) { setselected(index); } }, [currentPage.route]);
const handleSwitchTab = (url) => { switchTab({ url }); };
return ( <CoverView className='tab-bar'> <CoverView className='tab-bar-border'></CoverView> {list.map((item, index) => { return ( <CoverView key={index} className='tab-bar-item' onClick={() => handleSwitchTab(item.pagePath)} > <CoverImage src={selected === index ? item.selectedIconPath : item.iconPath} /> <CoverView style={{ color: selected === index ? selectedColor : color }} > {item.text} </CoverView> </CoverView> ); })} </CoverView> ); }
export default CustomTabBar;
|