底部导航栏模板

这样的效果

底部导航栏模板_第1张图片
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 (
      
    {this.state.list.map((item, index) =>
  • { this.changIndex(index) }} className={this.state.activeIndex === index ? 'active' : ''} key={item.id}>{item.name}
  • )}
) } // 改变下标 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一定要给宽度

你可能感兴趣的:(封装,javascript,前端,css)