@160over90/vue-floating-list-view 中文文档教程

Question

List View

Features

创建带有导航的部分列表，提供指向每个部分的链接。 当前部分的 li 在 nav 中被赋予类 active。

如果你没有 yarn，你可以在这里下载它。

Instructions for global registration

yarn add @160over90/vue-floating-list-view

在 main.js（应用程序入口点）

import ListView from '@160over90/vue-floating-list-view';

Vue.use(ListView);

Instructions for editing this package

yarn install

Compiles and hot-reloads for development

yarn run serve

Examples

中包含 ListView 组件的一个简单示例。 ListViewSection 组件放置在 ListView 组件内部。 ListViewSection 组件中的内容可以是任何内容，不一定是文本。

<ListViewContainer>
  <ListViewSection label="Section1">Section 1</ListViewSection>
  <ListViewSection label="Section2">Section 2</ListViewSection>
  <ListViewSection label="Section3">Section 3</ListViewSection>
</ListViewContainer>

Props

ListView

rootMargin（数字，默认值：0） 交集观察器的根边距，用于确定何时重新计算活动元素。 如果导航是固定的，这通常是导航的高度。

有序（布尔值，默认值：false） 确定导航中的列表是有序列表还是无序列表。

smoothScroll（布尔值，默认值：false） 单击导航项时平滑滚动到部分。 如果浏览器没有本机支持，则需要 Polyfill。

ListViewItem

标签（字符串，必填） 导航中使用的部分标签。 标签也被 slugfied 为该部分创建一个 id。

Polyfills

在没有本机支持的浏览器上，交集观察器和平滑滚动需要 Polyfill。 下面推荐的 polyfill 包。

• Intersection Observer Polyfill
• Smooth Scroll Polyfill

License

麻省理工学院