手册版本 V3.0
组件名称
graceNavBar : /graceUI/组件目录/graceNavBar
组件属性
属性名称 | 类型 | 默认值 | 作用 |
isCenter | Boolean | false | 是否居中布局 |
currentIndex | Number | 0 | 激活索引 |
size | Number | 120 | 宽度 单位 rpx |
items | Array | [] | 导航项目 数组形式 |
activeLineBg | String | linear-gradient(to right, #66BFFF,#3388FF) | 激活条颜色 |
activeColor | String | #333333 | 激活文本颜色 |
activeLineHeight | String | 6rpx | 激活条高度 |
activeLineWidth | String | 36rpx | 激活条宽度 |
activeDirection | String |
| 激活条横向对齐模式,默认左 center:居中,flex-end:右 |
activeFontWeight | Number | 700 | 激活文本加粗属性 : 700 / 900 代表加粗 400 代表普通 |
color | String | #333333 | 导航文本颜色 |
margin | Number | 0 | 右侧间距 单位 rpx |
textAlign | String | left | 文本布局方式 |
lineHeight | String | 50rpx | 文本行高 |
fontSize | String | 28rpx | 文本大小 |
activeFontSize | String | 28rpx | 激活项目文本大小 |
padding | String | 0rpx | 横向内间距 |
activeLineRadius | String | 0rpx | 激活条圆角尺寸 [ 2020-03-29 新增 ] |
animatie | Boolean | true | 切换时使用使用动画 [ nvue 暂不支持 2020-03-29 新增 ] |
autoLeft 2020-05-01 新增 | String | 空 | [ nvue 模式暂不支持] 激活选项是否自动滚动到最左侧,设置为 no 代表不自动 |
scorllAnimation 2020.11.16 新增 | Boolean | false | 是否开启滚动动画 |
change 事件
点击导航进行切换时会激活 change 事件,并传递对应的索引值;
演示代码
UNI 普通版本
NVUE 版本
微信小程序独立版本
登录并购买 GraceUI 后可以查阅完整手册内容 。
登录并购买 GraceUI 后可以查阅完整手册内容 。
登录并购买 GraceUI 后可以查阅完整手册内容 。