Ly-tab
A better mobile touch-swappable reusable component for Vue 2.0
一个用于移动端的可触摸滑动具有回弹效果的可复用Vue组件
demo效果
clone该仓库到本地可查看演示demo
Installation
npm i ly-tab -S
or
yarn add ly-tab
Usage
import Vue from 'vue'
import LyTab from 'ly-tab'
Vue.use(LyTab)
// 之后便可在全局使用了Example
ly-tab 2.x版本（推荐安装最新版本）使用方法：
<ly-tab
v-model="selectedId"
:items="items"
:options="options">
</ly-tab>export default {
data () {
return {
selectedId: 0,
items: [
{label: '首页'},
{label: '推荐'},
{label: 'Android'},
{label: '前端'},
{label: '后端'},
{label: 'iOS'},
{label: '产品'},
{label: '人工智能'},
{label: '设计'}
],
options: {
activeColor: '#1d98bd'
// 可在这里指定labelKey为你数据里文字对应的字段
},
}
}
}ly-tab 1.x版本使用方法：
<ly-tab
v-model="selectedId"
activeColor="#1d98bd">
<ly-tab-item
v-for="(item, index) in items"
:key="index">
{{item.label}}
</ly-tab-item>
</ly-tab>export default {
data () {
return {
selectedId: 0,
items: [
{label: '首页'},
{label: '推荐'},
{label: 'Android'},
{label: '前端'},
{label: '后端'},
{label: 'iOS'},
{label: '产品'},
{label: '人工智能'},
{label: '设计'}
]
}
}
}版本差异
2.x版本相较于1.x版本：
- 简化了使用复杂度
- 配置项传入方式采用Object方式传入，即options的绑定值为一个Object
- 新增滑条动画效果
- 增加item切换时（非fixBottom）位置调整（动画），使当前激活的item尽量显示在中间
- 不再依赖scss及相关依赖
CHANGELOG
可选的配置项：
从2.0版本开始，配置项采用Object方式传入，1.x版本采用单个配置传入方式
| 配置项 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| labelKey | String | 指定item的文字部分在item对象中的key | label |
| lineWidth | Number | fixBottom为false时tabbar底部滑条高度 | 1px |
| activeColor | String | 激活状态下字体以及滑条颜色 | red |
| fixBottom | Boolean | 是否固定在视图底部 | false |
| additionalX | Number | 近似等于超出边界时最大可拖动距离 | 50px |
| reBoundExponent | Number | 惯性回弹指数(值越大，幅度越大，惯性回弹距离越长) | 10 |
| sensitivity | Number | 惯性滑动时的灵敏度(值越小，阻力越大),可近似认为手松开后速度减为零所需时间 | 1000ms |
| reBoundingDuration | Number | 回弹动画duration | 360ms |
事件
| 事件名 | 参数 | 描述 |
|---|---|---|
| change | item, index | 当前点击的item以及索引值 |
Build Setup
# install dependencies
npm install
# or
yarn
# serve with hot reload at localhost:8080
npm run dev
# or
yarn dev
License
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent