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 自定义 TabBar 组件的更多相关文章

  1. weex 项目开发(四)项目框架搭建 及 自定义 TabBar 组件

    1.安装  路由模块  及  状态管理模块 npm install vue-router --save npm install vuex --save 2.自定义  TabBar  组件 src / ...

  2. 微信小程序自定义 tabbar

    一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...

  3. 微信小程序 - 自定义tabbar

    更新: 2019-1-18:自定义tabbar组件已发布 各种奇葩的需求,造就了我们 wxml <view class="nav-tabs"> <view cla ...

  4. 微信小程序自定义tabbar的实现

    微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...

  5. 小程序基础能力~自定义 tabBar

    自定义 tabBar 基础库 2.5.0 开始支持,低版本需做兼容处理. 自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景. 在自定义 tabBar 模式下 ...

  6. taro中自定义tabbar实现中间图标凸出效果

    遇到的一个需求是在tabbar上有一个凸起的小图标, 但是微信自带的tabbar是没有这个效果的, 无奈,只能使用自定义tabbar,查找了多方文档后发现大多是原生小程序实现, 关于taro文档的少之 ...

  7. #003 React 组件 继承 自定义的组件

    主题:React组件 继承 自定义的 组件 一.需求说明 情况说明: 有A,B,C,D 四个组件,里面都有一些公用的逻辑,比如 设置数据,获取数据,有某些公用的的属性,不想在 每一个 组件里面写这些属 ...

  8. Nuxt/Vue自定义导航栏Topbar+标签栏Tabbar组件

    基于Vue.js实现自定义Topbar+Tabbar组件|仿咸鱼底部凸起导航 最近一直在倒腾Nuxt项目,由于Nuxt.js是基于Vue.js的服务端渲染框架,只要是会vue,基本能很快上手了. 一般 ...

  9. 基于React.js网页版弹窗|react pc端自定义对话框组件RLayer

    基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react. ...

随机推荐

  1. mysql-学习链接

    http://www.cnblogs.com/lyhabc/p/3691555.html

  2. css中可继承和不可继承属性

    一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shad ...

  3. 01 Java 代码是怎么运行的

    Java代码运行的方式 1:在开发工具中运行 2:双击 jar 文件运行 3:在命令行中运行 4:在网页中运行 上述运行方式都离不开 JRE,也就是 Java 运行时环境.实际上 JRE 仅包含运行 ...

  4. 【JavaScript】关于 eval()执行JavaScript语句的一次实验测试

    实验主题: eval() 函数可以计算某个字符串,并执行其中的 JavaScript 代码.该函数只接受原始字符串作为参数,如果 string 不是原始字符串,那么该方法将不作任何的改变的返回.因此请 ...

  5. django demo --blog

    详情,请看虫师博客http://www.cnblogs.com/fnng/p/3737964.html 和https://my.oschina.net/matrixchan/blog/184445  ...

  6. CS231n笔记 Lecture 5 Convolutional Neural Networks

    一些ConvNets的应用 Face recognition 输入人脸,推测是谁 Video classfication Recognition 识别身体的部位, 医学图像, 星空, 标志牌, 鲸.. ...

  7. 刷题总结——array(ssoj)

    题目: 题目描述 给定 2 个正整数序列 A1, A2,序列长度分别为 L1, L2.你可以进行以下的一次操作:1. 选择两个数 K1,K2(1≤K1≤L1, 1≤K2≤L2):2. 移去 A1 中最 ...

  8. 学习 JSP:第二步 创建一个JSP Web Project

    接上文 学习 JSP:第一步Eclipse+Tomcat+jre(配置环境) [创建新工程](Dynamic Web Project) 1.选择 "File-->New-->Dy ...

  9. Python Base Five

    // 8 day(2016/8/11) 38. In python , it is oop. class Baskball:         def setName(self, name):      ...

  10. Reveal.js演讲幻灯片框架

    摘要 还需学习参考的链接  https://www.tuicool.com/articles/2AFFj2j 无意中看到这个插件,很喜欢,可以作用在演讲ppt,幻灯片,用户指引上等.代码简单,易维护 ...