uni, 스타일 수정 실패 문제를 해결하고 프레임 탭바 스타일을 다시 작성하는 작은 프로그램
머리말
실제 비즈니스 요구 사항에서 현재 프레임워크가 UI 디자인 요구 사항을 충족할 수 없는 경우가 종종 있는데, 이때 디자인 도면의 요구 사항을 충족하기 위해 프레임 구성 요소 스타일을 수정해야 합니다.
사례
본 사례 프로젝트는 uni를 기반으로 개발되었으며 뷰 프레임워크를 사용하고 있으며, 디자인 도면 요구 사항에 따라 보다 일반적인 이성 탭바인 탭바 스타일을 수정해야 합니다. (아래 그림과 같이)
공식 뷰 문서에 따르면 이 구성 요소는 여러 패키지로 구성되어 있으며 탭바는 최소 2개에서 최대 5개 항목을 지원한다는 점을 언급할 가치가 있으며 사용자 정의 탭바의 경우에도 이를 따라야 합니다. (아래 그림과 같이)
코드는 다음과 같습니다.
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>
자바스크립트 부분
<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>
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>
집중하다
크게 두 가지 점을 말씀드리자면, 스타일 분리를 구현한 후에는 v-deep(깊이 선택기)을 사용해도 스타일을 수정해야 하는 부분에서 수정이 어려울 때가 있습니다. 여기서 스타일 격리를 지우려면 한 줄의 코드를 사용해야 합니다.
options: {
styleIsolation: 'shared'
},
데이터, 라이프사이클 등과 동일한 수준이며, 스크립트로 작성할 수 있어 컴포넌트 내 스타일을 조작할 수 있다.
또 다른 포인트는 동적 스타일인데, js 코드에서는 메뉴를 이용해 필요한 데이터를 정리하고, 중앙 부분에 동적 스타일을 켜야 하는지 여부를 구체적으로 결정하는 필드를 제공합니다. 지금 바로
{
text: '发布活动',
name: 'task',
unIcon: '/static/icon/list.svg',
onIcon: '/static/icon/list.svg',
path: '/pages/activity/release',
isBig: true,
isLogin: true
},
isBig in
html 섹션에서 볼 수 있습니다.
<u-tabbar-item :key="idx" :name="item.name" :text="item.text" :class="{ 'tab-big': item.isBig }">
: '/pages/activity/release',
isBig: true,
isLogin: true
},
中的isBig
在html部分你可以看到
```vue
<u-tabbar-item :key="idx" :name="item.name" :text="item.text" :class="{ 'tab-big': item.isBig }">
tab-big클래스 이름이며, item.isBig클래스 이름 스타일을 사용할지 여부를 제어하는 스위치입니다. true이면 사용되며, 그 반대의 경우도 마찬가지입니다.