react开发:侧边栏背景与浮动Menu设计

设计需求：

• 给已有的siderMenu添加上背景图片
• 在siderMenu中添加浮动的侧边栏实现：点击跳转详情页面、点击收藏或取消收藏
  当前效果：
  

侧边栏背景设计：

step1:导入背景图片

background-image: url(../../assets/menu-background.png);
background-repeat:no-repeat ;
background-size: cover;

step2:设置背景图片高度

• 父盒子高度就是所有可见区高度

height:100%;

• 父盒子高度中包含其他盒子

height: ~'calc(100% - @{layout-header-height})';

• 背景图片需要设计为滚动条可见区高度

const scrollHight = document.body.scrollHeight;
style={{ height:{scrollHight}}}

采用父盒子高度中包含其他盒子的设计方法：

浮动Menu设计

step1:导入andt组件

`import { Menu } from 'antd';`

step2:

(menu的父元素)中导入menu的背景图片并设置浮动

background-image: url(../../assets/menu-focusing.png);
background-repeat:no-repeat ;
background-size: cover;
position: fixed;

step3:写出menu的style和标题

{this.getProjectData()}

浮动展示：当滑动滚动条时，menu始终在页面中

step4：getProjectData()函数获取数据，并取得前5(NUMBER_FIVE)条数据，再通过数据驱动生成menuitem

• 获取数据

getProjectData = () => {
    const { ProjectModel = {} } = this.props;
    const { Topdata = [""] } = ProjectModel;
    const getedData = [];
    for (let i = 0; i < Topdata.length; i += 1) {
      if (Topdata.length !== 0) {
        const { projectName = [] } = Topdata[i];
        getedData[i] = projectName;
      }
    }
    if (getedData.length >NUMBER_FIVE) {
      for (let j = NUMBER_FIVE; j <= getedData.length - 1; j += 1) {
        getedData.pop();
      }
    }
    return (
      getedData.map((rigthData) => (
        this.createProjectMenu(rigthData)
      )))
  }

• createProjectMenu()函数生成menuitem

  createProjectMenu = (rigthData) => {
    const { changeStyle = ''} = this.state;
    const { ProjectModel = {} } = this.props;
    const { Topdata = [""] } = ProjectModel;
    return (
      

        
          
            
              {rigthData}
            
          
          
             this.changeIcon(Topdata)}>
              
            
          
        
      
    )
  }

• goTheProject()函数：通过点击事件进行跳转，跳转到该项目的详情页面

goTheProject = () => {
    router.push({ pathname: '/Project/ProjectBranch' });
  }

• changeIcon()函数：通过点击图标进行收藏和取消收藏

const { confirm } = Modal;
changeIcon = (record) => {
    const { isChange } = this.state;
    const { dispatch, ProjectModel: { pagination } } = this.props;
    const data = record[0];
    const { id = '' } = data;

    this.setState({
      visible: true
    })

    if (isChange === 1) {
      this.setState(
        {
          changeStyle: 0,
          isChange: 0,
        }
      )
      confirm({
        title: `是否取消收藏所选项目`,
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          dispatch({
            type: 'ProjectModel/deleteTopProject',
            payload: {
              data: {
                projectId: id,
              },
              pagination,
            },
          });
        },
      });
    } else {
      this.setState(
        {
          changeStyle: 1,
          isChange: 1,
        }
      )
      confirm({
        title: `是否收藏所选项目`,
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          dispatch({
            type: 'ProjectModel/topProject',
            payload: {
              data: {
                projectId: id,
              },
              pagination,
            },
          });
        },
      });
    }
  }

总体设计：

点击[演示项目]跳转：

点击绿色五角星：

点击确定：

注：（1）、收藏与取消收藏步骤一致（2）、由于接口数据较少，项目二——五为函数添加项目。