zoukankan      html  css  js  c++  java
  • 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={{ "22px", height: "22px", background: `url(${item.selectedIcon}) center center / 21px 21px no-repeat`}}></div>
                            :
                            <div style={{ "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;
       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.效果图

  • 相关阅读:
    Kinect 开发 —— 硬件设备解剖
    Kinect 开发 —— 引言
    (转)OpenCV 基本知识框架
    OpenCV —— 摄像机模型与标定
    OpenCV —— 跟踪与运动
    OpenCV —— 图像局部与分割(二)
    OpenCV —— 图像局部与部分分割(一)
    OpenCV —— 轮廓
    OpenCV —— 直方图与匹配
    OpenCV —— 图像变换
  • 原文地址:https://www.cnblogs.com/crazycode2/p/9282294.html
Copyright © 2011-2022 走看看