底部导航栏模板

这样的效果

import React, { Component } from 'react'
import './css/style.css'
export default class App extends Component {
  state = {
    list: [{
      id: 1,
      name: "首页"
    }, {
      id: 2,
      name: "推荐"
    }, {
      id: 3,
      name: "我的"
    }],
    activeIndex: 0
  }
  render() {
    return (
      <div>
        <ul>
          {this.state.list.map((item, index) => <li onMouseDown={() => {
            this.changIndex(index)
          }} className={this.state.activeIndex === index ? 'active' : ''} key={item.id}>{item.name}</li>)}
        </ul>
      </div>
    )
  }
  // 改变下标
  changIndex(index) {
    this.setState({
      activeIndex: index
    })
  }
}

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  line-height: 50px;
  width: 100%;
  /* 注意如果是fiex定位一定要给宽度 */
}

ul li {
  flex: 1;
  /* line-height: 50px; */
  text-align: center;
}

.active {
  color: pink;
}

注意fixed一定要给宽度