wxc-tab-bar

Weex 版本底部 tab-bar 组件

规则

  • 用于底部 Tab 切换页面，目前支持 icon 、text 、iconFont 形式的底栏

Demo

wxc-tab-bar 底部标签页 - 图1 wxc-tab-bar 底部标签页 - 图2

使用方法

  1. <template>
    2.   <wxc-tab-bar :tab-titles="tabTitles"
    3.                :tab-styles="tabStyles"
    4.                title-type="icon"
    5.                @wxcTabBarCurrentTabSelected="wxcTabBarCurrentTabSelected">
    6.     <!-- 第一个页面内容-->
    7.     <div class="item-container" :style="contentStyle"><text>首页</text></div>
    8.   9.     <!-- 第二个页面内容-->
    10.     <div class="item-container" :style="contentStyle"><text>特别推荐</text></div>
    11.   12.     <!-- 第三个页面内容-->
    13.     <div class="item-container" :style="contentStyle"><text>消息中心</text></div>
    14.   15.     <!-- 第四个页面内容-->
    16.     <div class="item-container" :style="contentStyle"><text>我的主页</text></div>
    17.   </wxc-tab-bar>
    18. </template>
    19.   20. <style scoped>
    21.   .item-container {
    22.     width: 750px;
    23.     background-color: #f2f3f4;
    24.     align-items: center;
    25.     justify-content: center;
    26.   }
    27. </style>
    28. <script>
    29.   import { WxcTabBar, Utils } from 'weex-ui';
    30.   31.   // https://github.com/alibaba/weex-ui/blob/master/example/tab-bar/config.js 
    32.   import Config from './config'
    33.   34.   export default {
    35.     components: { WxcTabBar },
    36.     data: () => ({
    37.       tabTitles: Config.tabTitles,
    38.       tabStyles: Config.tabStyles
    39.     }),
    40.     created () {
    41.       const tabPageHeight = Utils.env.getPageHeight();
    42.       // 如果页面没有导航栏，可以用下面这个计算高度的方法
    43.       // const tabPageHeight = env.deviceHeight / env.deviceWidth * 750;
    44.       const { tabStyles } = this;
    45.       this.contentStyle = { height: (tabPageHeight - tabStyles.height) + 'px' };
    46.     },
    47.     methods: {
    48.       wxcTabBarCurrentTabSelected (e) {
    49.         const index = e.page;
    50.         // console.log(index);
    51.       }
    52.     }
    53.   };
    54. </script>Click to copy

更详细代码可以参考 demo

可配置参数

Prop Type Required Default Description
tab-titles Array Y [] Tab显示 配置
title-type String N icon 类型 icon/text/iconFont(注1)
tab-styles Array N [] 底部 Tab 样式配置
is-tab-view Boolean N true 当设置为false，同时 tab 配置 url 参数即可跳出
duration Number N 300 页面切换动画的时间
title-use-slot Boolean N false 使用 slot 配置底部导航 (注2)
timing-function String N - 页面切换动画函数
wrap-bg-color String N #F2F3F4 页面背景颜色
### 注1：使用 iconFont
* 在 Weex Ui 0.3.8以后，我们可以使用 iconFont 来代替原有 tab title 中的图片配置，像下面这个配置即可：
1. // https://github.com/alibaba/weex-ui/blob/master/example/tab-bar/config.js#L51
2. // '' -> '\ue608'
3. tabIconFontTitles: [
4. {
5. title: 'Home',
6. codePoint: '\ue608'
7. },
8. {
9. title: 'Message',
10. codePoint: '\ue752',
11. badge: 5
12. },
13. // ....
14. ],
15. // https://github.com/alibaba/weex-ui/blob/master/example/tab-page/config.js#L72
16. tabIconFontStyles: {
17. bgColor: '#FFFFFF',
18. titleColor: '#666666',
19. activeTitleColor: '#3D3D3D',
20. activeBgColor: '#FFFFFF',
21. isActiveTitleBold: true,
22. width: 160,
23. height: 120,
24. fontSize: 24,
25. textPaddingLeft: 10,
26. textPaddingRight: 10,
27. iconFontSize: 50,
28. iconFontMarginBottom: 8,
29. iconFontColor: '#333333',
30. activeIconFontColor: 'red',
31. iconFontUrl: '//at.alicdn.com/t/font_501019_mauqv15evc1pp66r.ttf'
32. }Click to copy

注2：自定义底部导航块

  • 当使用slot的方式配置底部导航的时候，需要确保原有简单配置已经不能满足现有需求情况下再使用，可以传入参数:title-use-slot="true",同时在wxc-tab-bar组件内部传入如下slot对应节点即可
  • 可以通过遍历到方式来生成，同时根据wxcTabBarCurrentTabSelected来确定当前的选择页，自己管理颜色即可。

111

222

333 Click to copy

主动触发设置页面

  1. // 直接在wxc-tab-bar上面绑定ref="wxc-tab-bar",然后调用即可
    2. this.$refs['wxc-tab-bar'].setPage(2)
    3.   4. // 如果想设置无动画跳转，可以这样使用(中间参数用于设置url，设置null即可)
    5. this.$refs['wxc-tab-bar'].setPage(2,null,false);Click to copy

事件回调

  1. //当前页面被选中的回调`@wxcTabBarCurrentTabSelected="wxcTabBarCurrentTabSelected"`Click to copy

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-tab-bar/