代码拉取完成，页面将自动刷新
顶部导航栏是可以横向滑动的自定义导航栏。
| 属性 | 类型 | 必填 | 备注 |
|---|---|---|---|
| tabItem | Array | 是 | 导航栏数据，默认为空，详情见tabItem
|
| options | Object | 是 | 导航栏样式参数，详情见options
|
| 属性 | 类型 | 必填 | 备注 |
|---|---|---|---|
| name | String | 是 | 导航栏单元标题 |
| id | Number | 是 | id |
| 属性 | 类型 | 必填 | 备注 |
|---|---|---|---|
| top_backgroundcolor | String | 是 | 导航栏背景颜色值，默认为'#e64d3a' |
| top_itemcolor | String | 是 | 导航栏单元标题颜色值，默认为'#000000' |
| top_itemselectcolor | String | 是 | 导航栏单元标题选中时颜色值，默认为'#ffffff' |
| 事件名 | 备注 |
|---|---|
| @tabItemClick | 导航栏单元标题点击回调，返回值event:{index:id}，返回值为，event.index，注：此处的index为当前选中的tabItem的id，并非下标index |
<topbar @tabItemClick="handleItemClick" :options="options" :tabItem="tabItem"></topbar>
import topbar from '../../components/top-tabbar/top-tabbar.vue'
data:{
return {
options:{
top_backgroundcolor:'#e64d3a',
top_itemcolor:'#000000',
top_itemselectcolor:'#ffffff'
},
tabItem: [
{
name: '中国明星',
id: 2001
},
{
name: '欧美明星',
id: 2002
}
]
}
}
methods: {
handleItemClick(e) {
console.log(e)
}
}
微信、QQ小程序、Android、Edge实测没问题，IOS没有本子尚未测试。
遇到问题欢迎评论指出，感谢你的关注和支持。
【蝴蝶壁纸】QQ小程序，每天分享免费壁纸！
【缘来是星座】微信小程序，每天1点、7点、17点更新十二星座运势，还可以查看你的他（她）和你是否配对奥！
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
