tabBar标签栏与tabs标签页

Posted 2023-04-15

参考技术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

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

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

下同。

ModernFlat

HTML5 Theme