更新记录

1.0.1(2021-09-03)

1、顶部横向导航栏。


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.2.3 app-vue × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

顶部导航栏

简介

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

属性

属性 类型 必填 备注
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没有本子尚未测试。

其他

遇到问题欢迎评论指出,感谢你的关注和支持。

demo

【蝴蝶壁纸】QQ小程序,每天分享免费壁纸!

avatar

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

avatar

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问