@160over90/vue-floating-list-view 中文文档教程
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 包。
License
List View
Features
Creates a list of sections with a nav that provides a link to each section. The current section's li is given the class active in the nav.
If you do not have
yarnyou can download it here.
Instructions for global registration
yarn add @160over90/vue-floating-list-view
Include in main.js (app entry point)
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
A simple example of the ListView component. The ListViewSection components are placed inside of a ListView component. The content inside of the ListViewSection components can be anything and does not have to be text.
<ListViewContainer>
<ListViewSection label="Section1">Section 1</ListViewSection>
<ListViewSection label="Section2">Section 2</ListViewSection>
<ListViewSection label="Section3">Section 3</ListViewSection>
</ListViewContainer>
Props
ListView
rootMargin (Number, Default: 0) The root margin for intersection observer to determine when to recalculate the active element. If the nav is fixed, this is usually the height of the nav.
ordered (Boolean, Default: false) Determines whether the list in the nav should be an ordered or unordered list.
smoothScroll (Boolean, Default: false) Smooth scrolls to section when nav item is clicked. Polyfill needed if browser doesn't have native support.
ListViewItem
label (String, Required) The section label used in the navigation. The label is also slugified to create an id for the section.
Polyfills
Polyfills are needed for intersection observer and smooth scrolling on browsers without native support. Recommended polyfill packages below.
