react 自定义 TabBar 组件
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 组件的更多相关文章
- weex 项目开发(四)项目框架搭建 及 自定义 TabBar 组件
1.安装 路由模块 及 状态管理模块 npm install vue-router --save npm install vuex --save 2.自定义 TabBar 组件 src / ...
- 微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...
- 微信小程序 - 自定义tabbar
更新: 2019-1-18:自定义tabbar组件已发布 各种奇葩的需求,造就了我们 wxml <view class="nav-tabs"> <view cla ...
- 微信小程序自定义tabbar的实现
微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...
- 小程序基础能力~自定义 tabBar
自定义 tabBar 基础库 2.5.0 开始支持,低版本需做兼容处理. 自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景. 在自定义 tabBar 模式下 ...
- taro中自定义tabbar实现中间图标凸出效果
遇到的一个需求是在tabbar上有一个凸起的小图标, 但是微信自带的tabbar是没有这个效果的, 无奈,只能使用自定义tabbar,查找了多方文档后发现大多是原生小程序实现, 关于taro文档的少之 ...
- #003 React 组件 继承 自定义的组件
主题:React组件 继承 自定义的 组件 一.需求说明 情况说明: 有A,B,C,D 四个组件,里面都有一些公用的逻辑,比如 设置数据,获取数据,有某些公用的的属性,不想在 每一个 组件里面写这些属 ...
- Nuxt/Vue自定义导航栏Topbar+标签栏Tabbar组件
基于Vue.js实现自定义Topbar+Tabbar组件|仿咸鱼底部凸起导航 最近一直在倒腾Nuxt项目,由于Nuxt.js是基于Vue.js的服务端渲染框架,只要是会vue,基本能很快上手了. 一般 ...
- 基于React.js网页版弹窗|react pc端自定义对话框组件RLayer
基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react. ...
随机推荐
- 零基础学 JavaScript 全彩版 明日科技 编著
第1篇 基础知识 第1章 JavaScript简介 1.1 JavaScript简述 1.2 WebStorm的下载与安装 1.3 JavaScript在HTML中的使用 1.3.1 在页面中直接嵌入 ...
- day01_11.break和continue
1.continue 下一个(用next更加形象一点)整体的循环没有被破坏掉,而是跳到下一个循环单位中 <?php for($i=1;$i<=10;$i++){ if($i==4){ co ...
- TensorFlow——深入MNIST
程序(有些不甚明白的地方改日修订): # _*_coding:utf-8_*_ import inputdata mnist = inputdata.read_data_sets('MNIST_dat ...
- Text Region Mask
本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/52886351 Python code ...
- 服务器端查看图片库 eog
eog 命令 eye of gnome,用来在服务器端查看图片. sudo apt-get install eog eog picname.jpg
- 【Luogu】P4208最小生成树计数(状压乱搞)
题目链接 最小生成树有两个性质,两个性质都知道的话这题就变成码农题了. 1.无论最小生成树长什么样,所有权值的边的数量是不变的.比如我有棵最小生成树有两条权值为2的边四条权值为1的边,那这个图的所有最 ...
- spring boot-html和templates
静态页面 spring boot项目只有src目录,没有webapp目录,会将静态访问(html/图片等)映射到其自动配置的静态目录,如下 /static /public /resources / ...
- hdu 1087 最大上升子序列的和(dp或线段树)
Super Jumping! Jumping! Jumping! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 ...
- GridView主键列不让编辑时应该修改属性DataKeyNames
原文发布时间为:2008-08-02 -- 来源于本人的百度文章 [由搬家工具导入] 为了防止GridView主键被编辑,应该在GridView属性DataKeyNames里面写上主键
- luogu 3709 大爷的字符串题 构造 莫队 区间众数
题目链接 题目描述 给你一个字符串a,每次询问一段区间的贡献 贡献定义: 每次从这个区间中随机拿出一个字符\(x\),然后把\(x\)从这个区间中删除,你要维护一个集合S 如果\(S\)为空,你\(r ...