wxc-tab-bar

Bottom tab bar

Rule

For the bottom Tab slider page, currently support **icon, text, iconFont ** form of the bottom bar.

Demo

Code Example

<template>
  <wxc-tab-bar :tab-titles="tabTitles"
               :tab-styles="tabStyles"
               title-type="icon"
               @wxcTabBarCurrentTabSelected="wxcTabBarCurrentTabSelected">
    <!--The first page content-->
    <div class="item-container" :style="contentStyle"><text>Home</text></div>

    <!--The second page content-->
    <div class="item-container" :style="contentStyle"><text>Hot</text></div>

    <!-- The third page content-->
    <div class="item-container" :style="contentStyle"><text>Message</text></div>

    <!-- The fourth page content-->
    <div class="item-container" :style="contentStyle"><text>My</text></div>
  </wxc-tab-bar>
</template>

<style scoped>
  .item-container {
    width: 750px;
    background-color: #f2f3f4;
    align-items: center;
    justify-content: center;
  }
</style>
<script>
  import { WxcTabBar, Utils } from 'weex-ui';

  // https://github.com/apache/incubator-weex-ui/blob/master/example/tab-bar/config.js
  import Config from './config'

  export default {
    components: { WxcTabBar },
    data: () => ({
      tabTitles: Config.tabTitles,
      tabStyles: Config.tabStyles
    }),
    created () {
      const tabPageHeight = Utils.env.getPageHeight();
      // If the page doesn't have a navigation bar
      // const tabPageHeight = env.deviceHeight / env.deviceWidth * 750;
      const { tabStyles } = this;
      this.contentStyle = { height: (tabPageHeight - tabStyles.height) + 'px' };
    },
    methods: {
      wxcTabBarCurrentTabSelected (e) {
        const index = e.page;
        // console.log(index);
      }
    }
  };
</script>

More details can be found in here

API

Prop	Type	Required	Default	Description
tab-titles	`Array`	`Y`	`[]`	Tab list config
title-type	`String`	`N`	`icon`	type `icon`/`text`/`iconFont` (*1)
tab-styles	`Array`	`N`	`[]`	bottom Tab config
is-tab-view	`Boolean`	`N`	`true`	if set `false`,add tab-titles config with `url` can be jumped out
title-use-slot	`Boolean`	`N`	`false`	configure title using `slot` (*2)
duration	`Number`	`N`	`300`	page slider time of animation
timing-function	`String`	`N`	`-`	page slider function of animation
wrap-bg-color	`String`	`N`	`#F2F3F4`	page background color
support-x-bar	`Boolean`	`Y`	`true`	if set `false`，the iPhone X Bar will not go into effect

*1: Using iconFont

After Weex Ui version about 0.3.8, we can use iconFont to represent our title image, you can use like this:

 // https://github.com/apache/incubator-weex-ui/blob/master/example/tab-bar/config.js#L51
 // '&#xe608;' -> '\ue608'
  tabIconFontTitles: [
    {
      title: 'Home',
      codePoint: '\ue608'
    },
    {
      title: 'Message',
      codePoint: '\ue752',
      badge: 5
    },
   // .... more
  ],
  // https://github.com/apache/incubator-weex-ui/blob/master/example/tab-page/config.js#L72
  tabIconFontStyles: {
      bgColor: '#FFFFFF',
      titleColor: '#666666',
      activeTitleColor: '#3D3D3D',
      activeBgColor: '#FFFFFF',
      isActiveTitleBold: true,
      width: 160,
      height: 120,
      fontSize: 24,
      textPaddingLeft: 10,
      textPaddingRight: 10,
      iconFontSize: 50,
      iconFontColor: '#333333',
      iconFontMarginBottom: 8,
      activeIconFontColor: 'red',
      iconFontUrl: '//at.alicdn.com/t/font_501019_mauqv15evc1pp66r.ttf'
    }

*2：Manually setting the title show

When configuring head navigation in the way of slot, we need to make sure that the original simple configuration is no longer able to meet the existing needs, and can be used to import param:title-use-slot="true", At the same time, the following slot corresponding nodes are introduced into the wxc-tab-bar component
It can be generated by traversing the way and determining the current selection page according to wxcTabBarCurrentTabSelected, and you need manage the color.

<div slot="tab-title-0"><text>111</text></div>
<div slot="tab-title-1"><text>222</text></div>
<div slot="tab-title-2"><text>333</text></div>

Manually setting the page

// <wxc-tab-bar ref="wxc-tab-bar">
// set the third page
this.$refs['wxc-tab-bar'].setPage(2)

// set the third page with no animation
this.$refs['wxc-tab-bar'].setPage(2,null,false);

Event

// @wxcTabBarCurrentTabSelected="wxcTabBarCurrentTabSelected"
// will return the selected index