Question

我正在使用nextjs和material-ui来学习如何首次构建Web应用程序。我正在尝试创建一个底部导航，该导航在单击时会突出显示，并同时导航到另一个屏幕。现在，只需单击两次即可完成。

我知道material-ui不具备功能。我尝试过使用next / router的方法，但是因为它包含了bottomnavigationaction，所以没有样式

import React, { useState} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {BottomNavigation, BottomNavigationAction) from '@material-ui/core';
import Router from 'next/router'
import FolderIcon from '@material-ui/icons/Folder';
import RestoreIcon from '@material-ui/icons/Restore';




const useStyles = makeStyles({
        root: {
        width: '100%',
        position: 'fixed',
        bottom: 0,
        boxShadow: '0 -1px 1px 0 rgba(0,0,0,.1)',
        backgroundColor: 'white',
        fontSize: '.53rem',
        fontWeight: 500,
        textDecoration: 'none',
      },

});

export default function Navigation() {
  const classes = useStyles();
  const [value, setValue] = useState('track');

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };



  return (
    <BottomNavigation position="bottom" value={value} onChange={handleChange} className={classes.root}>
      <BottomNavigationAction label="Track" value="track" icon={<RestoreIcon />} onClick={() => Router.push('/track')} />
      <BottomNavigationAction label="Learn" value="learn" icon={<FavoriteIcon />} onClick={() => Router.push('/learn')} />
</BottomNavigation>
  );
}

我希望每个页面（在本例中为“ / track”和“ / learn”）都将绑定到导航按钮，并且单击时样式将保持不变。

使用底部导航操作更改屏幕时，如何消除延迟？

0 个答案: