martial-arts/components/foot-tabs/foot-tab.vue

<template>
	<view class="foot-box"
		:style="{
			background: isGradualChange ? `linear-gradient( to ${direction}, ${colorOne} 0%, ${colorTwo} 20%, ${colorThree} 80%, ${colorFour} 100%)` : `url(${backgroundImage}) ${backgroundColor} `,
			boxShadow: `-10rpx 0rpx 10rpx rgba( 0, 0, 0, ${boxShadowNum})`
		}">
		<!-- 后台动态改变的icon与标题 start -->
		<view @tap="choosefoot(index)" class="item-box" v-for="(item,index) in footList" :key="index">
			<image :class="isIcon==index ? 'bulge' : ''" :style="{width:[46,42,116,40,42][index]+'rpx',height:[36,38,116,38,40][index]+'rpx'}" :src="current == index ? item.selectedIconPath : item.iconPath" mode="widthFix"></image>
			<view class="clips1" :class="current==index ? 'activeclass' : 'defaultclass'">{{item.title}}</view>
		</view>
		<!-- 后台动态改变的icon图 end -->
	</view>
</template>
<script>
    export default {
        name:'foot-tab',
		props:{
			// 当前选中项
			current:{
				type:String,
				default:'2'
			},
			// 默认哪个图标突出
			isIcon:{
				type:String,
				default:'2'
			},
			// 底部导航背景图片
			backgroundImage:{
				type:String,
				default:'http://img.netbian.com/file/2021/1212/232713y3bCy.jpg'
			},
			// 背景颜色
			backgroundColor:{
				type:String,
				default:'#FFFFFF'
			},
			// 是否开启背景颜色渐变
			isGradualChange:{
				type:Boolean,
				default:true
			},
			// 渐变方向
			direction:{
				type:String,
				default:'right top'
			},
			// 第一种颜色
			colorOne:{
				type:String,
				default:'#FFFFFF'
			},
			// 第二种颜色
			colorTwo:{
				type:String,
				default:'#FFFFFF'
			},
			// 第三种颜色
			colorThree:{
				type:String,
				default:'#FFFFFF'
			},
			// 第四种颜色
			colorFour:{
				type:String,
				default:'#FFFFFF'
			},
			// 阴影大小0~1之间 0表示没有阴影
			boxShadowNum:{
				type:String,
				default:'0.1'
			},
		},
        data() {
            return {
				ifCustomerService:false,//是否存在客服 默认不存在客服
				footList:[
					{
						iconPath: "/static/tabbar/icon-mo-kc.png",
						selectedIconPath: "/static/tabbar/icon-active-kc.png",
						title:'课程'
					},
					{
						iconPath: "/static/tabbar/icon-mo-shop.png",
						selectedIconPath: "/static/tabbar/icon-active-shop.png",
						title:'商城'
					},
					{
						iconPath: "/static/tabbar/icon-home.png",
						selectedIconPath: "/static/tabbar/icon-home.png",
						title:''
					},
					{
						iconPath: "/static/tabbar/icon-mo-sp.png",
						selectedIconPath: "/static/tabbar/icon-active-sp.png",
						title:'视频'
					},
					{
						iconPath: "/static/tabbar/icon-mo-wd.png",
						selectedIconPath: "/static/tabbar/icon-active-wd.png",
						title:'我的'
					}
				]
            };
        },
		mounted() {
			
		},
        methods:{
            choosefoot(index){
				// 已授权
				switch (index){
					case 0:
					uni.reLaunch({url:'/pages/tabbar/course/course'})
						break;
					case 1:
					uni.reLaunch({url:'/pages/tabbar/shop/shop'})
						break;
					case 2:
					uni.reLaunch({url:'/pages/tabbar/pagehome/pagehome'})
						break;
					case 3:
					uni.reLaunch({url:'/pages/tabbar/vedio/vedio'})
						break;
					case 4:
					uni.reLaunch({url:'/pages/tabbar/my/my'})
						break;
				}
            }
        }
    }
</script>

<style scoped>
	.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
	/* 外框样式 start */
	.foot-box{
		height: 120rpx;
		font-size: 24rpx;
		position: fixed;bottom: 0;left: 0;right: 0;z-index: 10;
		display: flex;justify-content: space-around;
		background-repeat: no-repeat;background-size: 100% 100%;
	}
	/* 外框样式 end */
	.item-box {
		position: relative;
		display: flex;
		justify-content: flex-end;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 10rpx;
		box-sizing: border-box;
		width: 100%;
		height: 120rpx;
	}
	/* 图标样式 */
	.item-box image {
		width: 64rpx;
		height: 64rpx;
	}
	.item-box view{
		margin-top: 6rpx;
	}
	/* 字体默认样式 */
	.defaultclass {
		color: #666666;
	}
	/* 字体选中样式 */
	.activeclass {
		color: #e42417;
	}
	/* 凸出样式 */
	.bulge {
		position: absolute;
		top: 2rpx;
		bottom: 2rpx;
		width: 116rpx!important;
		border-radius: 100%;
		vertical-align: middle;
	}
</style>