c-tabbar

tabbar组件

注意需要升级最新的cml-ui,在项目根目录执行npm i cml-ui@latest -S

属性

属性名类型必填默认值说明
c-bind:onclickEventHandle是tab被点击的时候会触发该事件，参数详情中detail.compName是tabbar.list配置中的compName
c-modelString是当 使用 component 动态组件的时候，更方便的和动态组件要渲染的组件名有个对应,具体使用方式参考下面案例中的 currentComp
tabbarObject是{}详情见下表

tabbar 详情

属性名类型必填默认值说明
useFixedLayoutBoolean否false用于决定是否使用position:fixed 这种布局方式去布局tabbar组件
positionString否'bottom'仅在useFixedLayout 为true的时候生效
tabbarStyleString否''tabbar样式支持自定义
tabLineStyleString否'background-color:#FC9153;height:2cpx;'tabbar的下划线自定义样式，仅在 position 设置为top的时候有效
textStyleString否'color:#000000'tabbar文案默认的样式
selectedTextStyleString否'color:#61c7fc'tabbar文案被选中的时候的样式
listArray是[]配置tabbar的icon，文案等，详情见下表

list 中数组每一项的配置详情

属性名类型必填默认值说明
textString是''tab的文案
icon网络图片地址或者require(path/to/image)否tab的icon
selectedIcon网络图片地址或者require(path/to/image)否tab被选中时显示的icon
iconStyleString否默认的icon的宽高是40cpx;设置icon的样式
selectedIconStyleString否设置icon被选中的时候的样式
compNameString是选择'usingComponents'中的组件进行对应，需要结合component动态组件进行渲染

示例

  1. <template>
  2. <view>
  3.   <view style="height:{{viewPortHeight}}cpx;background-color:#42f4f4" >
  4.     <component is="{{currentComp}}" ></component>
  5.   </view>
  6.   <c-tabbar 
  7.     c-bind:onclick='handleTabbarClick' 
  8.     c-model="{{currentComp}}"  
  9.     tabbar="{{tabbar}}"
  10.     ></c-tabbar>
  11. </view>
  13. </template>
  15. <script>
  16. import cml from "chameleon-api";
  17. class Index   {
  19.   data = {
  20.     viewPortHeight:0,
  21.     currentComp:'comp1',
  22.     tabbar:{
  23.       "tabbarStyle":"height:120cpx;background-color:#BAF6E8",//tabbar最外层的样式支持自定义
  24.       "tabLineStyle":"background-color:#069ADC;height:2cpx;",//自定义tabline的高度和背景色
  25.       "textStyle":"color:#3b3b3b", //文案默认style ,可以这里控制文案的大小，样式等
  26.       "selectedTextStyle":"color:#3baaff",//文案被选择style
  27.       // "position":"top", //tabbar的位置 top/bottom
  28.       "useFixedLayout":true,  //是否通过fixed布局进行tabbar的布局
  29.       "list":[
  30.         { 
  31.           "compName":"comp1",
  32.           "text": "detail",
  33.           "icon": require("../../assets/images/chameleon.png"),
  34.         },
  35.         {
  36.           "compName":"comp2",
  37.           "text": "home",
  38.           "icon": require("../../assets/images/chameleon.png"),
  39.         }
  40.       ]
  41.     },
  42.   }
  43.   methods = {
  44.     handleTabbarClick(args){
  45.       console.log('tabbar-info',args)
  46.     }
  47.   }
  48.   created(res){
  49.     cml.getSystemInfo().then(info => {
  50.     //这里要减去tabbar的高度，默认是120cpx,如果tabbarStyle中设置了其他高度，则要减去对应的值；
  51.       this.viewPortHeight = Number(info.viewportHeight) - 120;
  52.     });
  53.     if(res.comp){ //这里可以在传递的query中获取到想要激活的组件,具体使用方式参见文末的demo链接
  54.       this.currentComp = res.comp;
  55.     }
  56.   }
  57. }
  59. export default new Index();
  60. </script>
  62. <style>
  64. </style>
  66. <script cml-type="json">
  67. {
  68.   "base": {
  69.     "usingComponents": {
  70.       "c-tabbar":"cml-ui/components/c-tabbar/c-tabbar",
  71.       "comp1":"/components/demo-com/comp1",
  72.       "comp2":"/components/demo-com/comp2"
  73.     }
  74.   }
  75. }
  76. </script>

c-tabbar - 图1wx

c-tabbar - 图2web

c-tabbar - 图3native

查看完整示例