November Perfect Moustache

    nuke-tabbar

    2.3.12 • Public • Published

    Tabbar

    • category: UI
    • chinese: Tab切换
    • type: UI组件

    何时使用

    tab 切换,常用于业务的整个布局框架。

    API

    Tabbar

    属性 说明 类型 默认值
    itemStyle 自定义tabbar-item容器的样式,会覆盖默认样式,通过该字段可自定义设置tab导航栏的宽高及布局方式 object false
    style 自定义tabbar容器的样式,会覆盖默认样式 object false
    navTop 是否顶部导航,默认为底部的tabbar,可调节到顶部 boolean false
    navStyle 自定义tab标题栏的样式需要传入{active: {style...}, inactive: {style...}} active对应选中样式, inactive 为取消选中的样式 object false
    navScrollable 导航是否可滚动,如果可滚动,则不限制tab宽度,横向滚动。如果不可滚动,则每个子元素flex =1 均分父容器宽度 boolean false
    iconBar 是否带icon boolean false
    activeKey (必须)用于初次打开及切换到指定的tab,接收tab的key string false
    asFramework 当做框架来使用,启动该项,需要业务方手动控制shouldComponentUpdate事件进行优化控制,否则会认为以简单容器形式使用,对props变更进行过滤控制 boolean false
    onChange(embed模式无效) 切换tab时抛出prevTab和nextTab,手动更改props时不触发 funtion false
    customChange(embed模式无效) 定义内置切换tab的注入方法名称,默认为changeTo,使用方法,在tabContent中直接调用this.changeTo('tab 的key') string false
    customFocus(embed模式无效) 定义获得交点的hook,该方法存在tabbar在切换时会执行此方法,默认为onFoucs,在tabContent中直接定义changeTo即可,切换tab时切出为false,切入为true string false

    注意:

    • 更改state,props不生效 默认asFramework配置为false,将会对非tabbar状态变更进行过滤,达到提高性能的效果。如果使用者需要通过状态变更来控制组件,请设置为true
    • embed模式 当Tabbar.item设置 src 属性时,会启用embed模式,该模式 h5 表现为使用 iframe 加载页面,native 表现为使用 embed 加载jsBundle来加载模块, 但并非所有 app 都支持 embed 模式,因此使用前请充分自测!

    Tabbar.Item

    属性 说明 类型 默认值
    render 自定义渲染函数,item会传入当前是否属于活动状态 status,当前 tabkey 为参数 function
    tabKey (必须)定义该tabbar的key string
    preventDefaultEvent 定义是否要禁止掉默认事件 boolean
    num 透出的数字,跟在tab的title后面,展示方式 title(num) string
    onPress 点击后事件handler function
    title 透出的文案 string
    icon 如果tabbar 设置 iconbar=true,则此处设置有效,{src: 'xxx',selected:'xxx',size:'small/medium/large',style:{}} object
    src(启用embed模式) 定义要加载的 jsbundle url string

    1.0.0版本后的tabbar移除了可滚动效果 如需滑动效果可以参考 nuke-biz-ep-tabbar

    其他

    • bug、建议联系 @翊晨
    • 钉钉交流群

    Keywords

    Install

    npm i nuke-tabbar

    DownloadsWeekly Downloads

    26

    Version

    2.3.12

    License

    Apache-2.0

    Unpacked Size

    148 kB

    Total Files

    33

    Last publish

    Collaborators

    • doub
    • fnatic
    • leanhunter
    • no-repeat