| <template> | 
|     <view> | 
|         <u-tabbar | 
|             :value="index" | 
|             @change="change" | 
|             fixed | 
|             activeColor="#222" | 
|             inactiveColor="#666" | 
|             :safeAreaInsetBottom="true"> | 
|             <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> |