1.0.3 • Published 7 years ago
vue-slide-nav-page v1.0.3
vue-slide-nav
工作中经常会碰到这种导航和tab页联动的页面,所以就想到了自己写一个。现在自测没问题,也可能隐藏的太深了!如果有问题可以联系我。
大致使用方式请看components下面的test文件
此组件仅适用于rem布局,需要导入flexible.js
调用方法
import {vueSlideNav,slidePageWrapper,slidePageItem} from 'vue-slide-nav-page'
Slide-page-wrapper组件接口信息:
参数名 | 作用 | 默认值 | 类型 |
---|---|---|---|
defaultIndex | 设置默认显示的page下标 | 0 | Number |
changeIndex | 切换页面后回调,接受当前页面下标 | 无 | Function |
vue-slide-nav 组件接口信息:
参数名 | 作用 | 默认值 | 类型 |
---|---|---|---|
navList | 设置导航数组 | [] | Array |
defaultIndex | 默认选中的导航 | 0 | Number |
navChangeIndex | 切换导航后回调,接收当前导航下标 | 无 | Function |
activeAnimation | 是否开启切换动画 | false | Boolean |
fixedNav | 是否定位导航在头部 | false | Boolean |
fixedDirection | 定位方向 限定值为top/bottom | top | String |
navMove | 开启滚动导航 | false | Boolean |
height | 导航item的高度 | 44 (px) | Number |
width | 导航item的宽度 当存在LRPadding的时候会被替代掉 | 100(px) | Number |
LRPadding | 导航item的左右内边距,当存在此属性的时候width会被替代掉 | 0(px) | Number |
fontSize | 导航字体大小 | 14(px) | Number |
fontColor | 导航字体颜色 | #fff | String |
activeFontColor | 选中的导航字体颜色 | #fff | String |
navBackground | 导航的背景颜色 | #FFC4CF | String |
navActiveBackground | 选中的导航背景颜色 | #FFC4CF | String |
activeLine | 选中的时候下面的线的颜色 | #EF6680 | String |
####联系方式:
QQ 740905172
邮箱 740905172@qq.com