lc-tab-bar

底部 tab-bar 组件

注意事项

• 用于底部 Tab 切换页面，目前支持 icon 和文字形式的底栏

效果

使用方法

<template>
  <lc-tab-bar :tab-titles="tabTitles"
               :tab-styles="tabStyles"
               title-type="icon"
               :tab-page-height="tabPageHeight"
               @LcTabBarCurrentTabSelected="LcTabBarCurrentTabSelected">
    <div class="item-container" :style="contentStyle"><text>首页</text></div>
    <div class="item-container" :style="contentStyle"><text>特别推荐</text></div>
    <div class="item-container" :style="contentStyle"><text>消息中心</text></div>
    <div class="item-container" :style="contentStyle"><text>我的主页</text></div>
  </lc-tab-bar>
</template>

<style scoped>
  .item-container {
    width: 750px;
    background-color: #f2f3f4;
    align-items: center;
    justify-content: center;
  }
</style>
<script>
  import LcTabBar from 'lighting-ui/packages/lc-tab-bar';
  import Utils from 'lighting-ui/packages/utils';
  import Config from 'tabbar.js'

  export default {
    components: { LcTabBar },
    data: () => ({
      tabTitles: Config.tabTitles,
      tabStyles: Config.tabStyles
    }),
    created () {
      this.tabPageHeight = Utils.env.getPageHeight();
      const { tabPageHeight, tabStyles } = this;
      this.contentStyle = { height: (tabPageHeight - tabStyles.height) + 'px' };
    },
    methods: {
      LcTabBarCurrentTabSelected (e) {
        const index = e.page;
        // console.log(index);
      }
    }
  };
</script>

可配置参数

Prop	Type	Required	Default	Description
tab-titles	Array	Y	[]	Tab显示
title-type	String	N	icon	类型 icon/text
tab-styles	Array	N	[]	底部 Tab
tab-page-height	Number	N	1334	Tab page 页面的高度
is-tab-view	Boolean	N	true	当设置为false，同时 tab 配置 url 参数即可跳出
duration	Number	N	300	页面切换动画的时间
timing-function	String	N	-	页面切换动画函数
wrap-bg-color	String	N	#F2F3F4	页面背景颜色

主动触发设置页面

// 直接在lc-tab-bar上面绑定ref="lc-tab-bar",然后调用即可
this.$refs['lc-tab-bar'].setPage(2)

// 如果想设置无动画跳转，可以这样使用(中间参数用于设置url，设置null即可)
this.$refs['lc-tab-bar'].setPage(2,null,false);

事件回调

//当前页面被选中的回调
@LcTabBarCurrentTabSelected="LcTabBarCurrentTabSelected"