1 Star 0 Fork 0

bugking7_uniapp_plug / top-tabbar

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README

顶部导航栏

简介

顶部导航栏是可以横向滑动的自定义导航栏。

属性

属性 类型 必填 备注
tabItem Array 导航栏数据,默认为空,详情见tabItem
options Object 导航栏样式参数,详情见options

1、tabItem

属性 类型 必填 备注
name String 导航栏单元标题
id Number id

2、options

属性 类型 必填 备注
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小程序,每天分享免费壁纸!

avatar

【缘来是星座】微信小程序,每天1点、7点、17点更新十二星座运势,还可以查看你的他(她)和你是否配对奥!

avatar

Empty file

About

自定义顶部横向导航栏 expand collapse
JavaScript and 4 more languages
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
JavaScript
1
https://gitee.com/bugking7_uniapp_plug/top-tabbar.git
git@gitee.com:bugking7_uniapp_plug/top-tabbar.git
bugking7_uniapp_plug
top-tabbar
top-tabbar
master

Search

53164aa7 5694891 3bd8fe86 5694891