# c-tabbar

tabbar 组件

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

web

native

# 属性

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

tabbar 详情

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

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

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

# 示例

<template>
  <view>
    <view style="height:{{viewPortHeight}}cpx;background-color:#42f4f4">
      <component is="{{currentComp}}"></component>
    </view>
    <c-tabbar
      c-bind:onclick="handleTabbarClick"
      c-model="{{currentComp}}"
      tabbar="{{tabbar}}"
    ></c-tabbar>
  </view>
</template>

<script>
import cml from 'chameleon-api';
class Index {
  data = {
    viewPortHeight: 0,
    currentComp: 'comp1',
    tabbar: {
      tabbarStyle: 'height:120cpx;background-color:#BAF6E8', //tabbar最外层的样式支持自定义
      tabLineStyle: 'background-color:#069ADC;height:2cpx;', //自定义tabline的高度和背景色
      textStyle: 'color:#3b3b3b', //文案默认style ,可以这里控制文案的大小，样式等
      selectedTextStyle: 'color:#3baaff', //文案被选择style
      // "position":"top", //tabbar的位置 top/bottom
      useFixedLayout: true, //是否通过fixed布局进行tabbar的布局
      list: [
        {
          compName: 'comp1',
          text: 'detail',
          icon: require('../images/chameleon.png'),
        },
        {
          compName: 'comp2',
          text: 'home',
          icon: require('../images/chameleon.png'),
        },
      ],
    },
  };
  methods = {
    handleTabbarClick(args) {
      console.log('tabbar-info', args);
    },
  };
  created(res) {
    cml.getSystemInfo().then((info) => {
      //这里要减去tabbar的高度，默认是120cpx,如果tabbarStyle中设置了其他高度，则要减去对应的值；
      this.viewPortHeight = Number(info.viewportHeight) - 120;
    });
    if (res.comp) {
      //这里可以在传递的query中获取到想要激活的组件,具体使用方式参见文末的demo链接
      this.currentComp = res.comp;
    }
  }
}

export default new Index();
</script>

<style></style>

<script cml-type="json">
{
  "base": {
    "usingComponents": {
      "c-tabbar":"cml-ui/components/c-tabbar/c-tabbar",
      "comp1":"/components/demo-com/comp1",
      "comp2":"/components/demo-com/comp2"
    }
  }
}
</script>

← c-radio-group