applet/uni-app/问星数据.../components/tab-bar/tab-bar.vue

<template>
<view>
	<view class="tabbar-box">
	<view class="tabbar-container"> 
	    <view v-for="(item,index) in tabBar.list" :key="index" @click.top="openWxApplet(item)"> 
	        <view class="image_box">
	            <image class="tabbar-image"  :src="selected===index?item.selectedIconPath:item.iconPath"  lazy-load="false"> </image>  
	        </view>
	        <text :style="{color: (selected === index ? tabBar.selectedColor : tabBar.color)}">{{item.text}}</text> 
	    </view>
	</view>
	</view>
	<view class="center" style="bottom:34rpx"></view>
	<applet-mask v-if="appletMaskFlag" @closeMask='closeMask'></applet-mask>
</view>
</template>

<script>
	export default {
		name:'tab-bar',
		data() {
			return {
				appletMaskFlag:false,
				tabBar: {
					color: '#999999',
					selectedColor: '#2662FF',
					list: [{
							"urlScheme":"weixin://dl/business/?t=o3aIVwrmPmt",
							"pagePath": "/pages/index/index",
							"iconPath": "/static/tabbar/home.png",
							"selectedIconPath": "/static/tabbar/home_yes.png",
							"text": "首页"
						},
						{
							"urlScheme":"weixin://dl/business/?t=4HtwsBfu3Bj",
							"pagePath": "/pages/sphRank/sphRank",
							"iconPath": "/static/tabbar/sphRank.png",
							"selectedIconPath": "/static/tabbar/sphRank_yes.png",
							"text": "视频号榜单"
						},
						{
							"urlScheme":"weixin://dl/business/?t=MORR0T2Seih",
							"pagePath": "/pages/live/live",
							"iconPath": "/static/tabbar/live.png",
							"selectedIconPath": "/static/tabbar/live.png",
							"text": "直播大厅"
						},
						{
							"urlScheme":"weixin://dl/business/?t=vh7GswoTCIa",
							"pagePath": "/pages/cyRank/cyRank",
							"iconPath": "/static/tabbar/cyRank.png",
							"selectedIconPath": "/static/tabbar/cyRank_yes.png",
							"text": "创意中心"
						},
						{
							"urlScheme":"weixin://dl/business/?t=p79W84aUqrm",
							"pagePath": "/pages/mine/mine",
							"iconPath": "/static/tabbar/wode.png",
							"selectedIconPath": "/static/tabbar/wode_yes.png",
							"text": "我的"
						},
						
					]
				},
				selected: this.current //当前激活项
			};
		},
		props: {
			current: {
				type: [Number, String],
				default: 0
			}
		},
		methods: {
			closeMask(){
				this.appletMaskFlag = false
			},
			openWxApplet(data){
				uni.redirectTo({
					url:data.pagePath
				})
		   }
		},
		watch: {
			// current: {
			// 	handler(val) { // 
			// 		this.selected = val
			// 		const _this = this
			// 		uni.setNavigationBarTitle({ // 设置顶部bar的标题
			// 			title: _this.tabBar.list[val].text
			// 		})
			// 	},
			// 	immediate: true
			// }
		}
	}
</script>
<style>
	/* components/tabbar/tabbar.wxss */
	.tabbar-box{
	  position: fixed;
	  bottom: 0;
	  width: 100%;
	  height: 110rpx;
	  background-color: #fff;
	  box-shadow: 0 0rpx 6rpx rgba(194, 194, 194, 0.5);
	  z-index: 99;
	  padding-bottom: 16rpx;
	}
	.ipx_button {
	  height: 130rpx;
	}
	.tabbar-container{
	  display: flex;
	  justify-content: space-between;
	}
	.tabbar-container>view{
	  width: 20%;
	  text-align: center;
	  padding-top: 16rpx;
	}
	.tabbar-container>view>text{
	  display: block;
	  margin-top: 4rpx;
	  font-size: 22rpx;
	  line-height: 20rpx; 
	}
	.tabbar-image{
	  display: inline-block;
	  width: 46rpx;
	  height: 46rpx;
	}
	.tabbar-container>view:nth-child(3) {
	  margin-top: -54rpx;
	}
	.tabbar-container>view:nth-child(3) .image_box {
	  width: 108rpx;
	  background: #fff;
	  border-radius: 50%;
	  text-align: center;
	  margin: auto;
	  padding-top: 15rpx;
	}
	.tabbar-container>view:nth-child(3) image {
	  width: 80rpx;
	  height: 80rpx;
	}
	.center {
	  width: 108rpx;
	  height: 108rpx;
	  border-radius: 50%;
	  position: fixed;
	  bottom: 40rpx;
	  left: 0;
	  right: 0;
	  margin: auto;
	  box-shadow: 0 -4rpx 14rpx rgba(194, 194, 194, 0.5);
	  z-index: 1;
	}
</style>