<template> 
 | 
    <view> 
 | 
        <u-tabbar 
 | 
            :value="index" 
 | 
            @change="change" 
 | 
            fixed 
 | 
            activeColor="#222" 
 | 
            inactiveColor="#666" 
 | 
        > 
 | 
            <u-tabbar-item text="待办"> 
 | 
                <view class="" slot="active-icon">  
 | 
                    <image src="@/static/nav_daiban_sel@2x.png" class="icon-style" mode=""></image> 
 | 
                </view> 
 | 
                <view class="" slot="inactive-icon">  
 | 
                    <image src="@/static/nav_daiban@2x.png" class="icon-style" mode=""></image> 
 | 
                </view> 
 | 
            </u-tabbar-item> 
 | 
            <u-tabbar-item text="工作台"> 
 | 
                <view class="" slot="active-icon"> 
 | 
                    <image src="@/static/nav_gongzuotai_sel@2x.png" class="icon-style" mode=""></image> 
 | 
                </view> 
 | 
                <view class="" slot="inactive-icon">  
 | 
                    <image src="@/static/nav_gongzuotai@2x.png" class="icon-style" mode=""></image> 
 | 
                </view> 
 | 
            </u-tabbar-item> 
 | 
            <u-tabbar-item text="我的"> 
 | 
                <view class="" slot="active-icon"> 
 | 
                    <image src="@/static/nav_wode_sel@2x.png" class="icon-style" mode=""></image> 
 | 
                </view> 
 | 
                <view class="" slot="inactive-icon">  
 | 
                    <image src="@/static/nav_wode@2x.png" class="icon-style" mode=""></image> 
 | 
                </view> 
 | 
            </u-tabbar-item> 
 | 
        </u-tabbar> 
 | 
    </view> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
    export default { 
 | 
        name:"myTabbar", 
 | 
        props: { 
 | 
            index: 0 
 | 
        }, 
 | 
        data() { 
 | 
            return { 
 | 
                value: 0 
 | 
            }; 
 | 
        }, 
 | 
        methods: { 
 | 
            click(index) { 
 | 
                // console.log('click', index); 
 | 
                // this.$nextTick(() => { 
 | 
                //     this.value = index 
 | 
                //     if (index==0) { 
 | 
                //         uni.switchTab({ 
 | 
                //             url: '/pages/index/index' 
 | 
                //         }); 
 | 
                //     } else if (index== 1) { 
 | 
                //         uni.switchTab({ 
 | 
                //             url: '/pages/service/service' 
 | 
                //         }); 
 | 
                //     }else { 
 | 
                //         uni.switchTab({ 
 | 
                //             url: '/pages/mine/mine' 
 | 
                //         }); 
 | 
                //     } 
 | 
                // }) 
 | 
            }, 
 | 
            change(index) { 
 | 
                this.$nextTick(() => { 
 | 
                    this.value = index 
 | 
                }) 
 | 
                 
 | 
                console.log(index); 
 | 
                if (index==0) { 
 | 
                    // console.log('index'); 
 | 
                    uni.switchTab({ 
 | 
                        url: '/pages/index/index' 
 | 
                    }); 
 | 
                } else if (index== 1) { 
 | 
                    // console.log('workbench'); 
 | 
                    uni.switchTab({ 
 | 
                        url: '/pages/workbench/workbench' 
 | 
                    }); 
 | 
                }else { 
 | 
                    // console.log('mine'); 
 | 
                    uni.switchTab({ 
 | 
                        url: '/pages/mine/mine' 
 | 
                    }); 
 | 
                } 
 | 
            } 
 | 
        }, 
 | 
    } 
 | 
    /** 
 | 
     * 
 | 
     * */ 
 | 
</script> 
 | 
  
 | 
<style lang="scss" scope> 
 | 
.icon-style { 
 | 
    width: 44rpx; 
 | 
    height: 44rpx; 
 | 
} 
 | 
</style> 
 |