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. STL之set容器的总结

    最近做了很多题型,都是用简单的STL就解决了,深刻的感觉到STL的伟大力量,但是本人在遇到问题的时候还是喜欢用常规的算法去解决问题,脑袋笨没办法,有时候根本想不到用STL去解决一些问题 往往都是砍了网 ...

  2. Lua local function与function区别

    1 使用function声明的函数为全局函数,在被引用时可以不会因为声明的顺序而找不到 2 使用local function声明的函数为局部函数,在引用的时候必须要在声明的函数后面 例子: 下面这段代 ...

  3. Codeforces878C. Tournament

    $n \leq 50000$个人,每个人有$K \leq 10$个属性,现对每一个前缀问:进行比赛,每次任意两人比任意属性,小的淘汰(保证同一属性不会出现两个相同的数),最终有几个人有可能获胜. 明显 ...

  4. hdu 5974 A Simple Math Problem gcd(x,y)=gcd((x+y),lcm(x,y))

    题目链接 题意 现有\[x+y=a\\lcm(x,y)=b\]找出满足条件的正整数\(x,y\). \(a\leq 2e5,b\leq 1e9,数据组数12W\). 思路 结论 \(gcd(x,y)= ...

  5. 二、 java中的变量与数据类型及类型转换

    标识符:凡是可以自己命名的地方都叫标识符,如:类名.方法名.接口名... 1.标识符命名的规则: 由26个英文字母大小写,0-9,_或$组成,不遵守会报错. 不可以用数字开头. 不能使用关键字和保留字 ...

  6. html css的简单学习(二)

    html css的简单学习(二) <!Doctype html>告诉浏览器,这是一个html文档.lang="en" 默认是en,表示英语:zh-Hans 中文简体:z ...

  7. MySQL创建存储过程/函数需要的权限

    alter routine---修改与删除存储过程/函数 create routine--创建存储过程/函数 execute--调用存储过程/函数 下面有一篇介绍MySQL所有权限的博文 http:/ ...

  8. 2017 ACM-ICPC 沈阳区域赛记录

    出发日 中午坐大巴前往萧山机场. 哇开心又可以坐飞机了 飞机延误了.在候机大厅里十分无聊,先用机场的电脑玩了会小游戏 然后偷偷切了2个水题 (什么编译器IDE都没有,只能记事本了) 飞机上什么东西都没 ...

  9. 《Python基础教程读书笔记》

    第1章 快速构造:基础知识 1.2交互式构造器 不强制分号,一行就是一行.可以加上分号 1.4数字和表达式 加.减.乘.除.整除.求余.指数.取反(-例如-2**2,**的优先级比-大) from _ ...

  10. Noip2017赛前的一些记录

    前言 已经退役整整五个月了....选考以后终于又摸上了键盘.... 但是码力已经大不如前了........ 距离比赛也就只有一星期了....那就胡乱的做一些题目吧QAQ 这里是一些根据算法分类的咋杂题 ...