Anular el estilo de la barra de pestañas del componente

uni, un pequeño programa que resuelve el problema de falla en la modificación de estilo y reescribe el estilo de la barra de pestañas del marco

Prefacio

En los requisitos comerciales reales, a menudo nos encontramos con que el marco actual no puede cumplir con los requisitos de diseño de la interfaz de usuario, en este momento implicará modificar el estilo del componente del marco para cumplir con los requisitos de los dibujos de diseño.

Caso

Este proyecto de caso se desarrolla en base a uni y utiliza el marco de vista. De acuerdo con los requisitos del dibujo de diseño, necesitamos modificar el estilo de la barra de pestañas, que es la barra de pestañas del sexo opuesto más común. (Como se muestra abajo)

​

Según la documentación oficial de view, este componente se compone de varios paquetes, cabe mencionar aquí que la barra de pestañas admite al menos 2 y hasta 5 elementos, esto es algo que incluso una barra de pestañas personalizada debe cumplir. (Como se muestra abajo)

Aquí está el código:

parte html

<template>
	<view class="">
		<u-tabbar :value="active" :safeAreaInsetBottom="true" :placeholder="false" :fixed="fixed" :border="border"
			activeColor="#F17F42" inactiveColor="#999999" @change="onChange">
			<template v-for="(item, idx) in menus">
				<u-tabbar-item :key="idx" :name="item.name" :text="item.text" :class="{ 'tab-big': item.isBig }">
					<template #active-icon>
						<u-icon :name="item.onIcon" img-mode="aspectFit" size="22" class="icon">
						</u-icon>
					</template>
					<template #inactive-icon>
						<u-icon :name="item.unIcon" img-mode="aspectFit" size="22" class="icon">
						</u-icon>
					</template>
				</u-tabbar-item>
			</template>
		</u-tabbar>
	</view>
</template>

parte de JavaScript

<script>
	export default {
		name: 'LayoutTabbar',
		options: {
			styleIsolation: 'shared'
		},
		props: {
			active: {
				type: [String, Number],
				require: true,
				default: 0
			},
			fixed: {
				type: Boolean,
				default: false
			},
			border: {
				type: Boolean,
				default: false
			}
		},

		data() {
			return {
				menus: [{
						text: '首页',
						name: 'home',
						unIcon: '/static/icon/home-1.svg',
						onIcon: '/static/icon/home-0.svg',
						path: '/pages/index/index',
						isLogin: false
					},
					{
						text: '订单',
						name: 'order',
						unIcon: '/static/icon/order-0.svg',
						onIcon: '/static/icon/order-1.svg',
						path: '/pages/order/index',
						isLogin: false
					},
					{
						text: '发布活动',
						name: 'task',
						unIcon: '/static/icon/list.svg',
						onIcon: '/static/icon/list.svg',
						path: '/pages/activity/release',
						isBig: true,
						isLogin: true
					},
					{
						text: '钱包',
						name: 'wallet',
						unIcon: '/static/icon/wallet-0.svg',
						onIcon: '/static/icon/wallet-1.svg',
						path: '/pages/wallet/index',
						isLogin: false
					},
					{
						text: '我的',
						name: 'my',
						unIcon: '/static/icon/my-0.svg',
						onIcon: '/static/icon/my-1.svg',
						path: '/pages/my/index',
						isLogin: false
					}
				],
			}
		},
		computed: {
			usrIsLogin() {
				return this.$store.state.account.usrIsLogin
			}
		},
		methods: {
			onChange(name) {
				const obj = this.$arr2obj(this.menus, 'name')
				const item = obj[name]
				if(name == 'task' && this.usrIsLogin) {
					uni.navigateTo({
						url: item.path
					})
				}else if(name == 'task') {
					this.$toast('请先登录再进行操作')
				}else {
					uni.switchTab({
						url: item.path
					})
				}
			}
		}
	}
</script>

parte css

<style lang="scss">
	::v-deep .u-tabbar {
			flex: none;
			width: 100%;
			
			.u-border-top {
				border-color: lighten($black, 95%) !important;
			}
			.u-tabbar-item {
				height: 100%;
				.u-tabbar-item__text {
					margin-top: 3px;
					font-size: 11px;
					line-height: 14px;
				}
			}
			.tab-big {
				.u-tabbar-item {
					height: 100%;
					.u-tabbar-item__icon {
						height: 24px;
						align-items: flex-end;
						.u-icon__img {
							width: 40px !important;
							height: 40px !important;
						}
					}
					.u-tabbar-item__text {
						color: #FF7033 !important;
					}
				}
			}
		}
</style>

enfocar

Aquí hay dos puntos principales: una vez que hemos aislado el estilo, a veces es difícil modificar el estilo donde necesitamos modificarlo, incluso si usamos v-deep (selector de profundidad). Aquí debe usar una línea de código para borrar el aislamiento de estilo.

options: {
    
    
	styleIsolation: 'shared'
},

Está al mismo nivel que los datos, el ciclo de vida, etc., y se puede escribir en un script para que se puedan manipular los estilos del componente.

Otro punto es el estilo dinámico. En el código js, ​​uso el menú para organizar los datos requeridos y le doy a la parte central un campo específico para determinar si es necesario activar el estilo dinámico. Ahora mismo

{
	text: '发布活动',
	name: 'task',
	unIcon: '/static/icon/list.svg',
	onIcon: '/static/icon/list.svg',
	path: '/pages/activity/release',
	isBig: true,
	isLogin: true
},

es grande en

En la sección html puedes ver

<u-tabbar-item :key="idx" :name="item.name" :text="item.text" :class="{ 'tab-big': item.isBig }">

: '/páginas/actividad/lanzamiento',
isBig: verdadero,
isLogin: verdadero
},

中的isBig

在html部分你可以看到

```vue
<u-tabbar-item :key="idx" :name="item.name" :text="item.text" :class="{ 'tab-big': item.isBig }">

tab-bigEs el nombre de la clase y item.isBiges el interruptor que se utiliza para controlar si se utiliza el estilo del nombre de la clase. Si es cierto, se usa y viceversa.