<tabbar>

[[toc]]

<tabbar>为页面滑动切换组件（别名：标签页）

• 常用于tab切换页面。
• 支持url页面（tabPages模式）。
• 支持以 <tabbar-page>子组件编写的页面。
• 支持顶部、底部高自定义选项卡。

子组件

仅支持<tabbar-page>组件作为标签页内容，详细请看 这里。

预览效果

示例代码

<template>
    <div class="app">
        <tabbar
                ref="reflectName"
                class="tabbar"
                tabType="bottom"
                @pageSelected="pageSelected"
                @tabReselect="tabReselect">
            <!--页签①-->
            <tabbar-page ref="name_1" 
                    @refreshListener="refreshListener"
                    tabName="name_1"
                    title="首页"
                    selectedIcon="md-home">
                <navbar class="page-navbar">
                    <navbar-item type="back"></navbar-item>
                    <navbar-item type="title">
                        <text class="page-navbar-title">首页</text>
                    </navbar-item>
                    <navbar-item type="right" @click="viewCode('component/tabbar')">
                        <icon content="md-code-working" class="iconr"></icon>
                    </navbar-item>
                </navbar>
                <div class="page-content">
                    <image src="https://eeui.app/assets/images/cartoon/m2.png" class="page-content-image"></image>
                    <text class="content-text">页签里面可以放任何子组件，感谢你对eeui的支持</text>
                </div>
            </tabbar-page>
            <!--页签②-->
            <tabbar-page ref="name_2" @refreshListener="refreshListener"
                            tabName="name_2"
                            title="好友"
                            message="3"
                            selectedIcon="https://eeui.app/assets/images/cartoon/m8.png"
                            unSelectedIcon="https://eeui.app/assets/images/cartoon/m7.png">
                <navbar class="page-navbar">
                    <navbar-item type="title">
                        <text class="page-navbar-title">好友</text>
                    </navbar-item>
                </navbar>
                <div class="page-content">
                    <text class="content-text">page 2，tab显示器图标支持网络图片</text>
                </div>
            </tabbar-page>
            <!--页签③-->
            <tabbar-page ref="name_3" 
                        @refreshListener="refreshListener"
                        tabName="name_3"
                        title="圈子"
                        message="99"
                        selectedIcon="md-aperture">
                <navbar class="page-navbar">
                    <navbar-item type="title">
                        <text class="page-navbar-title">圈子</text>
                    </navbar-item>
                </navbar>
                <div class="page-content">
                    <text class="content-text">page 3</text>
                </div>
            </tabbar-page>
            <!--页签④-->
            <tabbar-page ref="name_4" 
                    @refreshListener="refreshListener"
                    tabName="name_4"
                    title="设置"
                    dot="true"
                    selectedIcon="md-cog">
                <navbar class="page-navbar">
                    <navbar-item type="title">
                        <text class="page-navbar-title">设置</text>
                    </navbar-item>
                </navbar>
                <div class="page-content">
                    <text class="content-text">page 4</text>
                </div>
            </tabbar-page>
        </tabbar>
    </div>
</template>
<style>
    .app {
        flex: 1
    }
    .iconr {
        width: 100px;
        height: 100px;
        color: #ffffff;
    }
    .tabbar {
        width: 750px;
        flex: 1;
    }
    .page-content {
        width: 750px;
        padding-top: 200px;
        align-items: center;
    }
    .content-text {
        font-size: 24px;
    }
    .page-navbar {
        width: 750px;
        height: 90px;
    }
    .page-navbar-title {
        color: #ffffff;
        font-size: 28px;
    }
    .page-content-image {
        width: 480px;
        height: 480px;
        margin-top: 30px;
        margin-bottom: 30px;
    }
</style>
<script>
    const eeui = app.requireModule('eeui');
    export default {
        methods: {
            viewCode(str) {
                this.openViewCode(str);
            },
            pageSelected(params) {
                eeui.toast({
                    message: "切换到第" + (params.position + 1) + "个标签页",
                    gravity: "middle"
                });
            },
            tabReselect(params) {
                eeui.toast({
                    message: "第" + (params.position + 1) + "个标签页被再次点击",
                    gravity: "middle"
                });
                eeui.toast();
            },
            refreshListener(params) {
                setTimeout(() => {
                    eeui.toast({
                        message: "刷新成功：" + params.tabName,
                        gravity: "middle"
                    });
                    this.$refs[params.tabName].refreshEnd();
                }, 1000);
            }
        }
    };
</script>

配置参数

例如：

<tabbar
    ref="reflectName"
    tabType="bottom"></tabbar>

配置参数 tabPages

说明：tabPages模式支持url定义页面；数据格式：对象数组。

例如：

<tabbar
    ref="reflectName"
    :tabPages="[ {
                    title: '首页',
                    url: 'http://dotwe.org/raw/dist/b5fd96d8d790f0100bdfc20b93eedf09.bundle.wx',
                }, {
                    title: '好友',
                    url: 'xxxx.js',
                    message: 9
                } ]"></tabbar>

事件回调 callback

/**
 * 组件加载完成
 */
@ready = function() { ... }
/**
 * 标签页切换时调用，滑动被停止之前一直调用
 * 返回参数：data = {position: 1, positionOffset: 1, positionOffsetPixels: 100}
 */
@pageScrolled = function(data) { ... }
/**
 * 标签页切换完成调用
 * 返回参数：data = {position: 1}
 */
@pageSelected = function(data) { ... }
/**
 * 标签页状态改变的时候调用
 * 返回参数：data = {state: 1}
 */
@pageScrollStateChanged = function(data) { ... }
/**
 * 标签被点击选择
 * 返回参数：data = {position: 1}
 */
@tabSelect = function(data) { ... }
/**
 * 标签被再次点击选择
 * 返回参数：data = {position: 1}
 */
@tabReselect = function(data) { ... }
/**
 * 标签页创建完毕
 * 返回参数：data = {tabName: 'tabName', url: '...'}
 */
@viewCreated = function(data) { ... }
/**
 * 标签页视图滚动事件（滚动完成后调用）
 * 返回参数：data = {tabName: 'tabName', x: 0, y: 100}
 */
@scrolled = function(data) { ... }
/**
 * 标签页视图滚动状态发生变化
 * 返回参数：data = {tabName: 'tabName', x: 0, y: 100, newState: 0}
 */
@scrollStateChanged = function(data) { ... }

调用方法 methods

/**
 * 根据页签名称获取页签位置
 * 参数一：页签名称
 * 返回参数：页签位置
 */
this.$refs.reflectName.getTabPosition(tabName);
/**
 * 根据页签位置获取页签名称
 * 参数一：页签位置
 * 返回参数：页签名称
 */
this.$refs.reflectName.getTabName(2);
/**
 * 显示tab未读信息数量
 * 参数一：页签名称
 * 参数二：未读数量
 */
this.$refs.reflectName.showMsg(tabName, 5);
/**
 * 显示tab未读红点
 * 参数一：页签名称
 */
this.$refs.reflectName.showDot(tabName);
/**
 * 隐藏tab未读信息数及未读红点
 * 参数一：页签名称
 */
 this.$refs.reflectName.hideMsg(tabName);
/**
 * 删除指定tab页
 * 参数一：页签名称
 */
this.$refs.reflectName.removePageAt(tabName);
/**
 * 切换tab页
 * 参数一：页签名称
 */
this.$refs.reflectName.setCurrentItem(tabName);
/**
 * tab页跳转url（仅：tabPages模式支持）
 * 参数一：页签名称
 * 参数二：跳转的App Js文件地址
 */
this.$refs.reflectName.goUrl(tabName, 'http://....');
/**
 * tab页刷新（仅：tabPages模式支持）
 * 参数一：页签名称
 */
this.$refs.reflectName.reload(tabName);
/**
 * 设置tab位置
 * 参数一：top|bottom
 */
this.$refs.reflectName.setTabType('top');
/**
 * 设置tab高度
 * 参数一：高度
 */
this.$refs.reflectName.setTabHeight(100);
/**
 * 设置tab背景颜色
 * 参数一：颜色代码
 */
this.$refs.reflectName.setTabBackgroundColor('#ffffff');
/**
 * 设置tab字体大小
 * 参数一：字体大小
 */
this.$refs.reflectName.setTabTextsize(22);
/**
 * 设置tab字体加粗
 * 参数一：0|1|2
 */
this.$refs.reflectName.setTabTextBold(0);
/**
 * 设置tab未选字体颜色
 * 参数一：颜色代码
 */
this.$refs.reflectName.setTabTextUnselectColor('#ffffff');
/**
 * 设置tab已选字体颜色
 * 参数一：颜色代码
 */
this.$refs.reflectName.setTabTextSelectColor('#00ffff');
/**
 * 设置tab图标可见
 * 参数一：true|false
 */
this.$refs.reflectName.setTabIconVisible(true);
/**
 * 设置tab图标宽度
 * 参数一：宽度
 */
this.$refs.reflectName.setTabIconWidth(50);
/**
 * 设置tab图标高度
 * 参数一：高度
 */
this.$refs.reflectName.setTabIconHeight(50);
/**
 * 开关页面切换动画
 * 参数一：true|false
 */
this.$refs.reflectName.setTabPageAnimated(false);
/**
 * 手势滑动切换页面
 * 参数一：true|false
 */
this.$refs.reflectName.setTabSlideSwitch(false);

tabbar-page

支持放置任何内容作为标签页内容。

tabbar-page 示例代码

<tabbar-page 
    ref="reflectName"
    tabName="name_3"
    title="圈子"
    message="99"
    selectedIcon="md-aperture">
    <div>
        <text>支持任何子组件</text>
    </div>
</tabbar-page>

tabbar-page 配置参数

例如：

<tabbar-page 
    ref="reflectName"
        tabName="name_3"
        title="圈子"
        message="99"
        selectedIcon="md-aperture">
    .....
</tabbar-page>

tabbar-page 事件回调

/**
 * 标签页下拉刷新事件
 * 注：刷新处理完毕后请调用方法“refreshEnd()”标记刷新结束
 * 返回参数：data = {tabName: 'tabName', title: 'title'}
 */
@refreshListener = function(data) { ... }

tabbar-page 调用方法

/**
 * 设置下拉刷新状态
 */
this.$refs.reflectName.setRefresh();
/**
 * 标记下拉刷新结束
 */
this.$refs.reflectName.refreshEnd();

[拓展]完全自定义tabbar

在线示例

点击查看预览

示例代码

<template>
    <div class="app">
        <div class="nav">
            <template v-for="(item, index) in tabPages">
                <div class="nav-item">
                    <text :class="[index === position ? 'nav-item-text-active' : 'nav-item-text']" @click="switchPage(index)">{{item.title}}</text>
                    <div v-if="index === position" class="nav-item-active"></div>
                </div>
                <text v-if="index < tabPages.length - 1" class="nav-line"></text>
            </template>
        </div>
        <tabbar
                ref="reflectName"
                class="tabbar"
                tabType="top"
                tabHeight="0"
                :tabPages="tabPages"
                @pageSelected="pageSelected"></tabbar>
    </div>
</template>
<style>
    .app {
        flex: 1
    }
    .nav {
        width: 750px;
        height: 100px;
        background-color: #3EB4FF;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .nav-item {
        justify-content: center;
        align-items: center;
    }
    .nav-item-text,
    .nav-item-text-active {
        position: relative;
        width: 120px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 28px;
        color: #ffffff;
        font-weight: 300;
    }
    .nav-item-text-active {
        color: #E1C040;
        font-weight: 600;
    }
    .nav-item-active {
        position: absolute;
        left: 40px;
        bottom: 0;
        width: 40px;
        border-radius: 6px;
        height: 6px;
        background-color: #E1C040;
    }
    .nav-line {
        height: 24px;
        width: 1px;
        background-color: #ffffff;
    }
    .tabbar {
        flex: 1;
        width: 750px;
    }
</style>
<script>
    export default {
        data() {
            return {
                position: 0,
                tabPages: [
                    {
                        tabName: 'home',
                        title: '首页',
                        url: 'http://dotwe.org/raw/dist/b5fd96d8d790f0100bdfc20b93eedf09.bundle.wx',
                    },
                    {
                        tabName: 'friend',
                        title: '好友',
                        url: 'http://dotwe.org/raw/dist/ba938c9aaebe41e5f60b98f90bd0bf61.bundle.wx',
                    },
                    {
                        tabName: 'group',
                        title: '圈子',
                        url: 'http://dotwe.org/raw/dist/fb6f016b0116969b6b503e1d3a35285f.bundle.wx',
                    },
                    {
                        tabName: 'setting',
                        title: '设置',
                        url: 'http://dotwe.org/raw/dist/ad0045a7cff0b3a680d9de6dd4806e81.bundle.wx',
                    },
                ],
            }
        },
        methods: {
            pageSelected(data) {
                this.position = data.position;
            },
            switchPage(index) {
                this.position = index;
                this.$refs.reflectName.setCurrentItem(this.tabPages[index].tabName);
            }
        }
    };
</script>