<template>
	<view>
		<u-tabbar 
			class="tabBar"
			:value="current?current:0"
			@change="changeTab"
			fixed="true"
			safeAreaInsetBottom="true"
			active-color="#4D5566"
			inactive-color="#848FA5"
		>
			<u-tabbar-item v-for="(item,index) in list" :key="index" :text="item.text">
				<image class="tabBarBtn" :src="item.iconPath" slot="inactive-icon"></image>
				<image class="tabBarBtn" :src="item.selectedIconPath" slot="active-icon"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		name:"TabBar",
		props:{
			current:Number
		},
		data(){
			return{
				list:[{
					iconPath:"/static/img/home.png",
					selectedIconPath:"/static/img/homeHL.png",
					pagePath:"pages/cloudStore/cloudStoreList",
					text:"主页",
					customIcon:false
				},
				{
					iconPath:"/static/img/user.png",
					selectedIconPath:"/static/img/userHL.png",
					pagePath:"pages/index/index",
					text:'我的',
					customIcon:false
				}]
			}
		},
		methods:{
			//页面跳转
			changeTab(e){
				//console.log(e)
				uni.switchTab({
					url:'/'+this.list[e].pagePath
				})
			}
		}
	}
</script>

<style lang="scss">
	.tabBar{
		font-size: 20rpx;
		color: #0066D6;
	}
	.tabBarBtn{
		width: 36rpx;
		height: 39rpx;
	}
</style>