antd--Menu 遇到的一些问题

目录

一、跳转路由后不会自动选中

二、滚动条样式设置

三、刷新页面后记住滚动条位置并自动滚动

项目中写了左菜单栏，用了蚂蚁组件里的 Menu；

最终效果类似这样的：

记录一下遇到的一些问题；

一、跳转路由后不会自动选中

这里将leftMenu封装成一个组件，每次加载一个页面时比如点击菜单跳转路由后都会重新渲染 leftMenu，所以会导致默认选中项一直为设置的默认值，不会根据点击进行跳转。

Menu 组件有 selectedKeys 属性

这里会存下图中的 key 属性

会根据 selectedKeys 里存的值来对应寻找 MENU_ENUM 的 key 属性

将当前路由进行处理后存入，因为这里是设置路由前部分与key值是相同的

二、滚动条样式设置

之前没有处理过滚动条相关问题，所以这次记录一下

CSS滚动条选择器

• ::-webkit-scrollbar — 整个滚动条.
• ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
• ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
• ::-webkit-scrollbar-track — 滚动条轨道.
• ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
• ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
• ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

在页面中，只用到了其中的几个属性，因为只是想把滚动条变窄一点

::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色
  background-color:#f8f8f8;
}
::-webkit-scrollbar {//滚动条的宽度(分别对应纵向滚动条和横向滚动条)
  width:6px;
  height:6px;
}
::-webkit-scrollbar-thumb {//滚动条的设置
  background-color:#dddddd;
  background-clip:padding-box;
  border-radius:3px;//圆角
}

三、刷新页面后记住滚动条位置并自动滚动

我用到的是 js 的 scrollIntoView 方法  Element.scrollIntoView()

注意这里的 Element 通过 document.getElementById(tmp); 获取，我用 document.getElementsByClassName(tmp); 会报错

我的处理方法是，点击之后路由跳转之前，把idN这个属性存到缓存里（上图），然后每次加载页面时取出（下图）

然后调用scrollIntoView属性

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。

element.scrollIntoView(); // 等同于element.scrollIntoView(true) 
element.scrollIntoView(alignToTop); // Boolean型参数 
element.scrollIntoView(scrollIntoViewOptions); // Object型参数

alignToTop

一个 Boolean 值：

• true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。 scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。
• false，元素的底端将和其所在滚动区的可视区域的底端对齐。scrollIntoViewOptions: {block: "end", inline: "nearest"}。

scrollIntoViewOptions

一个带有选项的object：

{
    behavior: "auto"  | "instant" | "smooth",
    block:    "start" | "end",
}

behavior 可选

定义动画过渡效果， "auto", "instant", 或 "smooth" 之一。默认为 "auto"。

block 可选

定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。

inline 可选

定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。