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
第一幅图:后台、后台、当前
第二幅图:后台、当前、选中
下同。
ModernFlat
HTML5 Theme
以上是关于tabBar标签栏与tabs标签页的主要内容,如果未能解决你的问题,请参考以下文章
easyui tabs 标签页绑定onselect事件时不跳转回默认标签页