tabvue.vue 1.9 KB
<template>
	<view class="content">
		
		<view class="teacherfooter">
			<view class="teacherfootitem" @click="gotab(item,index)" v-for="(item,index) in list" :key="index">
				<view class="teacherfootitemtop shou">
					<image :src="currentTabIndex == index?item.selectedIconPath:item.iconPath"></image>
				</view>
				<view class="teacherfootname " :class="currentTabIndex == index?'activename':''" >{{item.text}}</view>
				
			</view>
		</view>

	</view>

</template>

<script>
	
	export default {
		data() {
			return {
				list: [{
						"pagePath": "/pages/homepage/homepage",
						"iconPath": "../../static/index.png",
						"selectedIconPath": "../../static/indexactive.png",
						"text": "首页",
						
					}, {
						"pagePath": "/pages/nearshop/nearshop",
						"iconPath": "../../static/nearshop.png",
						"selectedIconPath": "../../static/nearshopactive.png",
						"text": "附近店铺"
					},
					{
						"pagePath": "/pages/luntan/luntan",
						"iconPath": "../../static/luntan.png",
						"selectedIconPath": "../../static/luntanactive.png",
						"text": "中面论坛"
					},
					{
						"pagePath": "/pages/usercenter/my",
						"iconPath": "../../static/user.png",
						"selectedIconPath": "../../static/useractive.png",
						"text": "个人中心"
					}

				],
				currentTabIndex: this.current
			}
		},
		props: {
			current: {
				type: [Number, String],
				default: 0
			},
			backgroundColor: {
				type: String,
				default: '#fbfbfb'
			},
			color: {
				type: String,
				default: '#999'
			},
			tintColor: {
				type: String,
				default: '#42b983'
			}
		},
		onLoad() {
			

		},
		methods: {
			gotab(item,index) {
				
				console.log(item.pagePath);
				 let url=item.pagePath
				
				console.log(url)
				 this.currentTabIndex = index;
				  this.$emit('click', index)
				uni.switchTab({url})
			}

		}

	}
</script>

<style>
	
</style>