<template>
	<view class="tabber">
		<view v-for='(item,index) in list'>
			<image :src="(index+1)==Number(xzindex)?item.xzicon:item.icon"></image>
			<view>{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	import {ref} from 'vue'
	export default {
		name:"Tabber",
		props:['xzindex'],
		setup(){
			let list=ref([
				{name:'首页',icon:'/static/home.png',xzicon:'/static/homexz.png',path:'/pages/index/index'},
				{name:'首页',icon:'/static/home.png',xzicon:'/static/homexz.png',path:'/pages/index/index'},
				{name:'首页',icon:'/static/home.png',xzicon:'/static/homexz.png',path:'/pages/index/index'},
				{name:'首页',icon:'/static/home.png',xzicon:'/static/homexz.png',path:'/pages/index/index'},
				{name:'首页',icon:'/static/home.png',xzicon:'/static/homexz.png',path:'/pages/index/index'}
			])
			return {
				list
			}
		}
	}
</script>

<style lang="scss">
	.tabber{
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120upx;
		>view{
			display: flex;
			flex-direction: column;
			align-items: center;
			>image{
				width: 40upx;
				height: 40upx;
			}
		}
	}
</style>