最近在复习 Vue.js,心想,既然是复习,不如做个小网页吧。因为之前使用过 Element UI,所以这次想要常常鲜也算是认识个新组建库就选了 View UI。
在使用的过程中,踩了不少坑,这里就谈一谈其中一个:锚记链接。
菜单项进行锚记链接跳转
我最开始是在菜单项MenuItem
的to
属性直接设置为跨页面的锚记链接,例如:/devspace#selfimprove
,结果发现,并非预期的结果,这样只会发生页面的跳转,但是如果说在 MenuItem
中放入锚记链接的话又会影响样式,而修改起来又特别麻烦。于是我在整个菜单栏 Menu
标签中放入了一个 Anchor
标签,并将其设置为了不显示,竟然发现,这个列表项都具有了锚记链接的功能(仿佛发现了新大陆~)。
<Anchor show-ink style="display:none;">
<AnchorLink href="" title="Basic Usage" />
</Anchor>
如何正确的定位
可是,我发现锚记链接第一次跳转并不会跳到指定位置,而是会相差几百像素,跳转后的单个页面跳转又正常了。原来,必须要将进行滚动的区域设置为带有滚动条的,否则第一次定位是无法完成的。代码很简单:
.scrollContainer{ /* 锚记链接的目标需要放在可以滚动的盒子中 */
position: relative;
overflow-y: scroll;
scrollbar-width: none; /*美化滚动条,使其隐藏*/
}
这样也就完成了想要的效果了。另外,在看其他博客的过程中,看到会出现的另外一个问题,虽然这次我并没有遇到,不过还是记下来了:
如果页面中的数据是通过 v-for 循环渲染的,则有可能出现'offset undefined 一类的报错',出现这种报错的大概率会影响页面的滚动效果
产生的原因是:锚点列表的数据与滚动的页面的展示数据是分开获取的,由于时间差的原因会导致其中一个渲染完成之后另一部分并没有被渲染.也就会造成组件在获取 offset 时找不到(也就是 undefined),报错并导致失去原有的页面效果.
解决办法:设法使两部分数据同一时间赋值给渲染的变量,比如分两个接口获取锚点的分类和内容,在 create 中调用接口获取数据,但不要再两个接口中分别赋值.统一到一个接口数据获取完成后再赋值,这样就可以避免这种报错.