面向对象关于利用数组对象的创建底部栏

Posted 2021-02-03 xyyyy

/*eslint-disable*/
//底部导航栏组件
import React from "react";
import {render} from "react-dom";
import "./compoments.less";
import indexNo from ‘../images/index-no.png‘
import indexYes from ‘../images/index-yes.png‘
import shopNo from ‘../images/shop-no.png‘
import shopYes from ‘../images/shop-yes.png‘
import serviceNo from ‘../images/server-no.png‘
import serviceYes from ‘../images/server-yes.png‘
import myNo from ‘../images/my-no.png‘
import myYes from ‘../images/my-yes.png‘

export default class BottomBar extends React.Component {
    constructor(props) {
        super(props);
    }

    state = {
        bottomBar: [{
            name: "index",
            isActive: false,
            icon: indexNo,
            activeIcon: indexYes,
            font: "首页",
            url: "#/index"
        }, {
            name: "shop",
            isActive: false,
            icon: shopNo,
            activeIcon: shopYes,
            font: "门店",
            url: "#/index"
        }, {
            name: "service",
            isActive: false,
            icon: serviceNo,
            activeIcon: serviceYes,
            font: "门店",
            url: "#/service"
        }, {
            name: "my",
            isActive: false,
            icon: myNo,
            activeIcon: myYes,
            font: "我的",
            url: "#/my"
        }]
    };

    /**
     * 页面开始获取哪个菜单属于被点击状态
     */
    componentWillMount() {
        let _select = localStorage.getItem(‘select‘);
        let {bottomBar} = this.state;
        bottomBar.filter(item => {
            if (item.name == _select) {
                item.isActive = true
            }
        });
        this.setState(
            bottomBar
        );
    }

    setItem(_item) {
        localStorage.setItem(‘select‘, _item.name);
        location.replace(_item.url);
    }

    render() {
        const BottomBar = ()=> {
            let {bottomBar} = this.state;
            return (
                <div className="tabBar">
                    { bottomBar.map((i) =>
                        <div id={i.name} className="bottom-common-line-div index" key={i.name}
                             onClick={v => this.setItem(i,v)}>
                            <div className="icon-img">
                                <img src={i.isActive == true ? i.activeIcon : i.icon } />
                            </div>
                            <p>{i.font}</p>
                        </div>
                    )}

                </div>
            )
        };
        return (<BottomBar/>)

    };

}

这样子后期修改/增加底部栏的个数 只需要在数组上做修改即可，包括后台对权限的管理，灵活性更大