54 lines
1.6 KiB
Vue
54 lines
1.6 KiB
Vue
<template>
|
|
<view>
|
|
<u-tabbar :value="name" :fixed="true" :border="false" activeColor="#03AE80" zIndex="50" inactiveColor="#999" :safeAreaInsetBottom="true" >
|
|
<u-tabbar-item :text="item.text" @click="swtichTab(item.path)" :name="item.name" v-for="item in tabList" :key="item.path">
|
|
<image slot="active-icon" style="width: 40rpx;height: 40rpx;" :src="item.selectIconPath" />
|
|
<image slot="inactive-icon" style="width: 40rpx;height: 40rpx;" :src="item.iconPath" />
|
|
</u-tabbar-item>
|
|
</u-tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'tabar',
|
|
props: {
|
|
name: {
|
|
type: String,
|
|
default: 'home'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tabList:[
|
|
{
|
|
iconPath: '/static/icon/home.png',
|
|
path: '/pages/index/index',
|
|
selectIconPath: "/static/icon/home_active.png",
|
|
text: '首页',
|
|
name: 'home'
|
|
},
|
|
{
|
|
iconPath: '/static/icon/home.png',
|
|
path: '/pages/video/video',
|
|
selectIconPath: "/static/icon/home_active.png",
|
|
text: '数据',
|
|
name: 'video'
|
|
},
|
|
{
|
|
iconPath: '/static/icon/mine.png',
|
|
path: '/pages/mine/mine',
|
|
selectIconPath: "/static/icon/mine_active.png",
|
|
text: '我的',
|
|
name: 'mine'
|
|
}
|
|
]
|
|
};
|
|
},
|
|
methods:{
|
|
swtichTab (url) {
|
|
uni.reLaunch({ url })
|
|
}
|
|
}
|
|
}
|
|
</script> |