react 自定义 TabBar 组件
2023-09-11 14:15:30 时间
1.创建 组件
src/components/TabBar/index.js
/** * TabBar 组件 */ import React ,{ PureComponent } from 'react'; import classNames from 'classnames'; import { Link } from 'react-router-dom'; import {menuData} from '../../common/menu'; import 'antd-mobile/lib/tab-bar/style/index.css'; import 'antd-mobile/lib/badge/style/index.css'; import Styles from './index.less'; class WxTabBar extends PureComponent { state = { selectedTab: 'home', hidden: false } changeTab = (tab) => { this.setState({ selectedTab: tab }) } // 监听 props 的变化 componentWillReceiveProps(nextProps){ let pathName = nextProps.location.pathname; if(pathName === '/home' || pathName === '/classify' || pathName === '/shopcar' || pathName === '/me'){ this.setState({ hidden:false, selectedTab:pathName.substring(1) }); }else{ this.setState({ hidden:true }); } } render(){ return ( <div style={{'display': this.state.hidden ? 'none' : 'block'}} className={classNames({ 'am-tabs-tab-bar-wrap':true, },Styles.container)}> <div className="am-tab-bar-bar" style={{backgroundColor:"white"}}> { menuData.map(item => ( <div key={item.key} className="am-tab-bar-tab"> <Link to={item.path} onClick={this.changeTab.bind(this,item.key)}> <div className="am-tab-bar-tab-icon"> <span className="am-badge am-tab-bar-tab-badge tab-badge"> { this.state.selectedTab === item.key? <div style={{width: "22px", height: "22px", background: `url(${item.selectedIcon}) center center / 21px 21px no-repeat`}}></div> : <div style={{width: "22px", height: "22px", background: `url(${item.icon}) center center / 21px 21px no-repeat`}}></div> } {/* <sup className="am-badge-text">1</sup> */} </span> </div> <p className="am-tab-bar-tab-title" style={{color: this.state.selectedTab === item.key?item.tintColor:item.unselectedTintColor}}>{item.name}</p> </Link> </div> )) } </div> </div> ) } } export default WxTabBar;
样式
index.less
.container{ position: fixed; left: 0px; bottom: 0px; width: 100%; background-color: #fff; box-sizing: border-box; }
菜单
src/common/menu.js
/** * 菜单栏 数据 */ // 主页 import home1 from '../assets/home1.png' import home2 from '../assets/home2.png' // 分类 import sort1 from '../assets/sort1.png' import sort2 from '../assets/sort2.png' // 购物车 import shopcar1 from '../assets/shopcar1.png' import shopcar2 from '../assets/shopcar2.png' // 我的 import me1 from '../assets/me1.png' import me2 from '../assets/me2.png' /** * tabbar菜单 */ const menuData = [ { name:'主页', key:'home', path:'/home', icon: home1, selectedIcon:home2, unselectedTintColor:"#949494", tintColor:"#33A3F4", }, { name:'分类', key:'classify', path:'/classify', icon: sort1, selectedIcon:sort2, unselectedTintColor:"#949494", tintColor:"#33A3F4", }, { name:'购物车', key:'shopcar', path:'/shopcar', icon: shopcar1, selectedIcon:shopcar2, unselectedTintColor:"#949494", tintColor:"#33A3F4", }, { name:'我的', key:'me', path:'/me', icon: me1, selectedIcon:me2, unselectedTintColor:"#949494", tintColor:"#33A3F4", }, ] export { menuData }
2.页面调用
<WxTabBar {...this.props} />
3.效果图
相关文章
- 实现拖拽复制和可排序的react.js组件
- React组件继承,泛型写法
- 使用Timer组件制作计时器
- [React Intl] Use a react-intl Higher Order Component to format messages
- React-Native 组件开发方法
- react的3种组件
- [React Testing] Test Drive Mocking react-router’s Redirect Component on a Form Submission
- [React Intl] Format Date and Time Using react-intl FormattedDate and FormattedTime
- [React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer
- js生成二维码的jquery组件–qrcode
- vue商城项目开发:封装banner组件、组件参数传递
- [Link]TCPDF组件
- Atitit.web ui 组件化 vs mvc
- 第51篇 QML自定义组件 — 可拖动组件
- client高性能组件化框架React简单介绍、特点、环境搭建及经常使用语法
- 如何使用React Hooks将React类组件转换为功能组件
- React学习笔记(三)—— 组件高级
- 从零开始手写Tomcat的教程14节----服务器组件(Server)和服务组件(Service)
- TDesign小程序组件库体验
- 【taro react hooks 错误解决】---- Warning: Can‘t perform a React state update on an unmounted component.
- Nio2Endpoint组件:Tomcat如何实现异步I/O?