手册版本 V5.0
组件介绍
gui-switch-navigation 切换导航组件可以快速帮您实现多种形式的分类、状态导航，是一个非常常用、好用的组件;
组件名称
gui-switch-navigation : /graceUI/components/gui-switch-navigation
兼容平台
| H5 | APP | 小程序 | NVUE |
| ✔ | ✔ | ✔ | ✔ |
组件属性
| 属性名称 | 类型 | 默认值 | 作用 |
| width | Number | 690 | 组件宽度，单位 rpx，默认 690 rpx |
| isCenter | Boolean | false | 是否居中布局 |
| currentIndex | Number | 0 | 激活项目的索引 |
| size | Number | 120 | 宽度 单位 rpx，为 0 时代表自适应内容宽度 |
| items | Array | [] | 导航项目 数组形式 : [{id:0, name:'名称1'},{id:1, name:'名称2', ...} ] |
| 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 | 激活条圆角尺寸 |
| animatie | Boolean | true | 切换时使用使用动画 [ nvue 暂不支持动画效果 ] |
| scorllAnimation | Boolean | true | 是否产生滚动动画 |
| tipsStyle | String | vue background-color:#FF0000; padding:0 10rpx; color:#FFFFFF; font-size:22rpx nvue background-color:#FF0000; padding-left:10rpx; padding-right:10rpx; color:#FFFFFF; font-size:22rpx | 提示信息样式，如需修改请使用条件编译兼容 nvue |
组件事件
@change="" 点击导航进行切换时会激活 change 事件，并传递对应的索引值;
导航数据格式
[
{'name' : '全部', 'id' : 0, 'tips' : '8'},
{'name' : '新闻', 'id' : 1, 'tips' : 'hot'},
{'name' : '体育', 'id' => 2},
....
]
// 注意
tips 为空代表没有提示， 为 point 时代表一个点状提示；组件说明
1 :size="0" 代表自适应内容宽度，选中项目基于 scroll-into-view 属性实现展示位置切换动画（ 无法居中 ）。
2 后端 api 数据格式不匹配是请转换数据格式，参考 ： https://www.graceui.com/v5/info/10154-0.html
演示代码
UNI 普通版本
NVUE 版本
登录并购买 GraceUI 后可以查阅完整手册内容 。