# llc-nav-list

> ```json subtractHeight: { type: Number, default: 0 }, viewClientHeight: { type: Number, default: 0 }, //近似等于超出边界时最大可拖动距离(px); additionalY: { type: Number, default: 50 }, // 惯性回弹指数(值越大，幅度越大，惯性回弹距离越长);

Latest version **1.0.4** (published 2022-08-17) · 0 weekly downloads

## Install

```sh
npm install llc-nav-list
pnpm add llc-nav-list
yarn add llc-nav-list
bun add llc-nav-list
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2022-08-17 |
| First published | 2021-12-21 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 995.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | l864684766 |

## Links

- npm: https://www.npmjs.com/package/llc-nav-list
- npm.io page: https://npm.io/package/llc-nav-list

## Dependencies (5)

- [vue](https://npm.io/package/vue.md) ^3.2.25
- [vite-plugin-dts](https://npm.io/package/vite-plugin-dts.md) ^0.9.6
- [postcss-px-to-viewport](https://npm.io/package/postcss-px-to-viewport.md) ^1.1.1
- [unplugin-vue-define-options](https://npm.io/package/unplugin-vue-define-options.md) ^0.10.0
- [rollup-plugin-external-globals](https://npm.io/package/rollup-plugin-external-globals.md) ^0.6.1

## Recent versions

- 1.0.4 (latest) — 2022-08-17
- 1.0.3 — 2022-08-17
- 1.0.1 — 2022-01-04
- 1.0.2 — 2022-01-04
- 0.0.17 — 2021-12-28
- 0.0.16 — 2021-12-27
- 0.0.15 — 2021-12-27
- 0.0.14 — 2021-12-27
- 0.0.13 — 2021-12-24
- 0.0.12 — 2021-12-24
- 0.0.11 — 2021-12-23
- 0.0.10 — 2021-12-23
- 0.0.9 — 2021-12-23
- 0.0.7 — 2021-12-23
- 0.0.6 — 2021-12-23
- … 7 more at https://npm.io/package/llc-nav-list/versions

## README

## 参数
```json
 subtractHeight: {
    type: Number,
    default: 0
  },
  viewClientHeight: {
    type: Number,
    default: 0
  },
  //近似等于超出边界时最大可拖动距离(px);
  additionalY: {
    type: Number,
    default: 50
  },
  // 惯性回弹指数(值越大，幅度越大，惯性回弹距离越长);
  reBoundExponent: {
    type: Number,
    default: 10,
    validator(value: number) {
      return value > 0;
    }
  },
  //灵敏度(惯性滑动时的灵敏度,值越小，阻力越大),可近似认为速度减为零所需的时间(ms);
  sensitivity: {
    type: Number,
    default: 1000,
    validator(value: number) {
      return value > 0;
    }
  },
  //列表的UL标签的高度，这个主要是应对可伸缩的UL高度进行适应管理
  domHeight: {
    type: Number,
    default: 0,
    validator(value: number) {
      return value >= 0;
    }
  }
```

## 注意事项
  - 本插件只适用于H5移动端，技术栈为vue3+ts+vite，vue2的使用者请留意兼容性,插槽名称为item。
  - 使用cdn调用vue的项目更适用，不然可能会导致slot插槽报错问题（isCE）

## 用例：
```javascript
<template>
 <nav-list
    :subtractHeight="data.navHeight"
    :viewClientHeight="data.viewClientHeight"
  >
    <template #item>
      <li
        :class="data.activeIndex == index ? 'avtice' : ''"
        v-for="(item, index) in data.navList"
        :key="index"
      >
        {{ item.text }}
      </li>
    </template>
  </nav-list>
</template>
<script setup lang="ts">
import {NavList} from 'llc-nav-list'
import 'llc-nav-list/dist/style.css'
import { ref } from 'vue'
console.log(NavList)
const data =ref({
    activeIndex: 0,
    navHeight: 50, //横向标题高度，
    viewClientHeight:0,
    navList: [
      { text: "国内", id: "0100" },
      { text: "国外", id: "0200" },
      { text: "热门", id: "0300" },
      { text: "马尔代夫", id: "0400" },
      { text: "泰国", id: "0500" },
      { text: "国内1", id: "0100" },
      { text: "国外1", id: "0200" },
      { text: "热门1", id: "0300" },
      { text: "马尔代夫1", id: "0400" },
      { text: "泰国1", id: "0500" },
      { text: "国内2", id: "0100" },
      { text: "国外2", id: "0200" },
      { text: "热门2", id: "0300" },
      { text: "马尔代夫2", id: "0400" },
      { text: "泰国3", id: "0500" },
      { text: "国内3", id: "0100" },
      { text: "国外3", id: "0200" },
      { text: "热门3", id: "0300" },
      { text: "沙拉把你", id: "0400" },
      { text: "国内", id: "0100" },
      { text: "国外", id: "0200" },
      { text: "热门", id: "0300" },
      { text: "马尔代夫", id: "0400" },
      { text: "泰国", id: "0500" },
      { text: "国内1", id: "0100" },
      { text: "国外1", id: "0200" },
      { text: "热门1", id: "0300" },
      { text: "马尔代夫1", id: "0400" },
      { text: "泰国1", id: "0500" },
      { text: "国内2", id: "0100" },
      { text: "国外2", id: "0200" },
      { text: "热门2", id: "0300" },
      { text: "马尔代夫2", id: "0400" },
      { text: "泰国3", id: "0500" },
      { text: "国内3", id: "0100" },
      { text: "国外3", id: "0200" },
      { text: "热门3", id: "0300" },
      { text: "马尔代夫3", id: "0400" }
    ],
  }
)
 
</script>
```

## git地址：
 https://github.com/luochenLing/llc-nav-list

---
_Source: https://npm.io/package/llc-nav-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
