开发手册 - 选项卡(bui-tabbar)

选项卡(bui-tabbar)

用法

选项卡的实现使用方式：bui-tabbar + slider，充分利用slider的滑动特性。

实现：

• bui-tabbar 通过控制 currentTab(v-model)索引来实现选中效果。
• slider 通过 @change事件改变 index 和 currentTab 实现联动。
• 要实现底部选项卡，只需要将 bui-tabbar 和 slider 区域对调即可;

html关键代码如下:

<bui-tabbar :tabItems="tabItems" showSelectedLine=true @change="onItemChange" v-model="currentTab"></bui-tabbar>
<slider class="slider" @change="onSliderChange" :index="currentTab">
    <div class="slider-item">
       <text class="h1">tab0</text>
    </div>
    <div class="slider-item">
        <text class="h1">tab1</text>
    </div>
    <div class="slider-item">
        <text class="h1">tab2</text>
    </div>
    <div class="slider-item">
        <text class="h1">tab3</text>
    </div>
</slider>

JS关键代码如下：

module.exports = {
    data: function () {
        return {
            leftItem: {
                icon: 'ion-chevron-left'
            },
            currentTab:1,
            tabItems: [
                {
                    title: "首页",
                    icon: "ion-home"
                },
                {
                    icon: "ion-planet",
                    title: "探索"
                },
                {
                    icon: "ion-ios-cart",
                    title: "商城"
                },
                {
                    icon: "ion-ribbon-a",
                    title: "奖励"
                }
            ]
        }
    },
    methods: {
        back() {
            this.$pop();
        },
        onItemChange(index){
        },
        onSliderChange(e){
            var index = e.index;
            this.currentTab=index;
        }
    }
}

Example: bui-tabbar

属性

事件

支持 @change事件，返回当前选中 item 的 index