React 小案例 無線首頁底部導航元件

效果：底部頁面導航 點選當前圖示 圖示高亮

頁面結構

1.將所用到的小圖示檔案放置在static資料夾下

2.在src下新建tabbar資料夾，用於存放元件資源

3.頁面程式碼

注意：

將本頁面的css引入，

定義tarbarArr陣列，用於迴圈小圖示和文字，

遍歷陣列tarbarArr：

{
   tarbarArr.map((v,i)=>(
        
    ))
}複製程式碼

用div遍歷展示小圖示：

<div className={"iconfont "+v.img}/>複製程式碼

給每個按鈕新增點選事件：

用箭頭函式將當前index傳遞出去，為觸發後面的點選當前高亮

onClick={()=>this.itemChange(i)複製程式碼

在state中定義預設高亮選中為第一個按鈕：

constructor(props){
    super(props)
    this.state={
        index:0
    }
}複製程式碼

點選事件函式：

將i作為函式引數傳遞出去，點選每個按鈕，即修改state中的index為i（當前）

itemChange = (i)=>{
    this.setState({
        index:i
    })
}複製程式碼

給按鈕再新增一個active類，即如果state中的index為當前i，即新增active，如果不是，即新增空（不新增）

className={"tabbar-item"+(this.state.index===i?' active':'')複製程式碼

index.js檔案裡所有內容：

import React,{Component} from 'react'
import './index.css'
const tarbarArr =[
    {
        img:'icon-home',
        text:'首頁'
    },
    {
        img:'icon-fenlei',
        text:'分類'
    },
    {
        img:'icon-gouwuchekong',
        text:'購物車'
    },
    {
        img:'icon-yonghu',
        text:'我的'
    }
]
class Tabbar extends Component{
    constructor(props){
        super(props)
        this.state={
            index:0
        }
    }
    itemChange = (i)=>{
        this.setState({
            index:i
        })
    }
    render(){
        return(
            <div className="tabbar">
                <div className="tabbar-content">
                    {
                        tarbarArr.map((v,i)=>(
                            <div key={i} className={"tabbar-item"+(this.state.index===i?' active':'')} onClick={()=>this.itemChange(i)}>
                                <div className={"iconfont "+v.img}/>
                                <div>{v.text}</div>
                            </div>
                        ))
                    }
                </div>
            </div>
        );
    }
}

export default Tabbar;複製程式碼

css中全部內容：

.tabbar{
    height: 50px;
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #ccc;
    padding: 5px 0;
}
.tabbar-content{
    display: flex;
}
.tabbar-item{
    flex: 1;
}
.tabbar-item .iconfont{
    font-size: 28px;
}

//點選當前變色
.active{
    color: #ff4e41;
}複製程式碼

在App.js中引入：

引入Tabbar元件，和小圖示，

將Tabbar標籤放置，

import Tabbar from './components/tabbar'
import './components/static/iconfont.css'複製程式碼

render() {
  return (
    <div className="App">
      <Tabbar/>
    </div>
  );
}複製程式碼