tabBar标签栏与tabs标签页

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了tabBar标签栏与tabs标签页相关的知识,希望对你有一定的参考价值。

参考技术A tabBar——底部标签栏

1、在app.js中使用tabBar(不用引入AtTabBar组件、更新current值 onClick函数)

(1)了解参数

 (2)使用

tabBar:

  color:'#808080',

  backgroundColor:'#CCDEFF',

  selectedColor:'#FFFFFF',

  list:[



      pagePath:'pages/homePage/home_page',

      text:'社群',

      iconPath:'assets/img/homePageIconUnselected.png',

      selectedIconPath:'assets/img/homePageIconSelected.png',

    ,

   

      pagePath:'pages/index/index',

      text:'个人',

      iconPath:'assets/img/personPageUnselected.png',

      selectedIconPath:'assets/img/personPageSelected.png'

   

]



2、引入AtTabBar组件

(1)引入组件:import AtTabBar from'taro-ui'

PS:使用带图标标签栏时还需引入以下样式文件(仅按需引用时需要):

@import"~taro-ui/dist/style/components/icon.scss";

(1)通过onClick事件来更新current值变化

constructor()

    super(...arguments)

    this.state =

    current:0

    



handleClick (value)

    this.setState(

        current: value

    )



(2)直接使用<AtTabBar>

render ()

    return(

        <AtTabBar

            backgroundColor='#ececec'

            color='#ea6bb8'

            fixed   //固定底部

            tabList=[

                title:'待办事项',iconPrefixClass:'fa',iconType:'clock',text:'new',

                title:'拍照' ,iconType:'camera',

                title:'通讯录',iconType:'folder',text:'100',max:'99'

            ]

            onClick=this.handleClick.bind(this)

            current=this.state.current

        />

    )



tabs——标签页

1、引入组件:import AtTabs, AtTabsPane from'taro-ui'

2、与引入AtTabBar组件类似,通过onClick事件来更新current值变化

constructor()

    super(...arguments)

    this.state =

    current:0

    



handleClick (value)

    this.setState(

        current: value

    )



3、使用

4、参数

Chrome多选与高亮标签页

多选标签页:和文件多选类似,按住shift点击一个tab,按住shift再点击另外一个tab,就会选中这两个tab(包含)之间所有的tab。

按住ctrl点击tab则是点选任意tab。


选择多个标签页有什么用呢?用鼠标拖拽它们,就可以把这些选中tab放到新的窗口里。反过来,还可以把多个窗口合并。


不过,在默认情况下,处于选中状态的标签页很不明显,那么问题来了?如何更明显地区分 当前标签页、选中标签页、后台标签页?


扩展做不到,主题来帮忙:设置 | 外观 | 主题背景 | 打开 Chrome 网上应用店,选择一款合适的吧。


支持关键字搜索,个人比较喜欢clean/light/white or gray/minimal/flat的,比如下面几个:

Programmer

Chrome多选与高亮标签页

第一幅图:后台、后台、当前

第二幅图:后台、当前、选中

下同。


ModernFlat

Chrome多选与高亮标签页

Chrome多选与高亮标签页


HTML5 Theme

以上是关于tabBar标签栏与tabs标签页的主要内容,如果未能解决你的问题,请参考以下文章

Vue实现简单Tab标签页组件

element的标签页(tabs)组件样式自定义

easyui tabs 标签页绑定onselect事件时不跳转回默认标签页

easyui tab标签页拖拽排序

标签页(tab)切换的原生js,jquery和bootstrap实现

python测试开发django-175.bootstrap导航-带下拉菜单的标签页标签页(nav-tabs)