Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6005
Star 91
Fork 164
H
hello uni-app x
提交 8e917c1b 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

style(tabBar): 优化折叠面板缩进样式

上级 eeb6c047
隐藏空白更改
内联 并排
Showing with 144 addition and 136 deletion
pages/tabBar/API.uvue
浏览文件 @ 8e917c1b
...@@ -11,32 +11,36 @@ ...@@ -11,32 +11,36 @@
<u-link :href="'https://uniapp.dcloud.io/uni-app-x/api/'" :text="'https://uniapp.dcloud.io/uni-app-x/api/'" <u-link :href="'https://uniapp.dcloud.io/uni-app-x/api/'" :text="'https://uniapp.dcloud.io/uni-app-x/api/'"
:inWhiteList="true"></u-link> :inWhiteList="true"></u-link>
</view> </view>
<uni-collapse> <uni-collapse>
<uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name" <uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
class="item"> class="item">
<view v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item" hover-class="is--active" <view style='padding-left:18px;' v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item"
@click="goPage(`/${page.path}`)"> hover-class="is--active" @click="goPage(`/${page.path}`)">
<text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{page.style["navigationBarTitleText"]}}</text> <text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{
<image :src="arrowRightIcon" class="uni-icon-size"></image> page.style["navigationBarTitleText"]
</view> }}</text>
<uni-collapse style="width: 100%" v-for="childMenu in menuItem.children" :key="childMenu!.id"> <image :src="arrowRightIcon" class="uni-icon-size"></image>
<uni-collapse-item :title="childMenu.name" class="item" style="margin-bottom: 0"> </view>
<view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu.pages" <uni-collapse style="width: 100%" v-for="childMenu in menuItem.children" :key="childMenu!.id">
:key="childPage!.path" @click="goPage(`/${childPage.path}`)"> <uni-collapse-item :title="childMenu.name" class="item"
<text class="uni-navigate-text">{{ style="margin-bottom: 0;padding-left: 5px;padding-right: 5px;">
childPage.style["navigationBarTitleText"] <view style='padding-left: 18px;' class="uni-navigate-item" hover-class="is--active"
}}</text> v-for="childPage in childMenu.pages" :key="childPage!.path" @click="goPage(`/${childPage.path}`)">
<image :src="arrowRightIcon" class="uni-icon-size"></image> <text class="uni-navigate-text"
</view> :class="{'left-win-active': leftWinActive === childPage.path && hasLeftWin}">{{
</uni-collapse-item> childPage.style["navigationBarTitleText"]
</uni-collapse> }}</text>
</uni-collapse-item> <image :src="arrowRightIcon" class="uni-icon-size"></image>
</uni-collapse> </view>
<view v-if="!hasLeftWin" ref="pop" @click="hidePop()" class="popup"> </uni-collapse-item>
<view style="width: 90%; background-color: white" @click="stopClickPop"> </uni-collapse>
<api-set-tabbar></api-set-tabbar> </uni-collapse-item>
</view> </uni-collapse>
</view> <view v-if="!hasLeftWin" ref="pop" @click="hidePop()" class="popup">
<view style="width: 90%; background-color: white" @click="stopClickPop">
<api-set-tabbar></api-set-tabbar>
</view>
</view>
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
...@@ -56,10 +60,10 @@ ...@@ -56,10 +60,10 @@
} }
}, },
computed: { computed: {
hasLeftWin():boolean{ hasLeftWin() : boolean {
return !state.noMatchLeftWindow return !state.noMatchLeftWindow
}, },
leftWinActive():string{ leftWinActive() : string {
return state.leftWinActive.slice(1) return state.leftWinActive.slice(1)
} }
}, },
...@@ -82,20 +86,20 @@ ...@@ -82,20 +86,20 @@
} }
}, },
// #ifdef WEB // #ifdef WEB
watch:{ watch: {
$route: { $route: {
immediate: true, immediate: true,
handler(newRoute) { handler(newRoute) {
if (newRoute.matched.length) { if (newRoute.matched.length) {
const activeCategoryIndex = this.menu.findIndex(menuItem => menuItem?.pages.some(page => this.leftWinActive && this.leftWinActive === page?.path)) const activeCategoryIndex = this.menu.findIndex(menuItem => menuItem?.pages.some(page => this.leftWinActive && this.leftWinActive === page?.path))
if (activeCategoryIndex > -1) { if (activeCategoryIndex > -1) {
this.$nextTick(() => { this.$nextTick(() => {
((this.$refs.category as ComponentPublicInstance[])[activeCategoryIndex])?.$callMethod('openCollapse', true) ((this.$refs.category as ComponentPublicInstance[])[activeCategoryIndex])?.$callMethod('openCollapse', true)
}) })
} }
} }
} }
} }
}, },
// #endif // #endif
} }
...@@ -122,4 +126,4 @@ ...@@ -122,4 +126,4 @@
display: none; display: none;
background-color: rgba(16, 16, 16, 0.5); background-color: rgba(16, 16, 16, 0.5);
} }
</style> </style>
pages/tabBar/CSS.uvue
浏览文件 @ 8e917c1b
...@@ -11,28 +11,30 @@ ...@@ -11,28 +11,30 @@
<u-link :href="'https://uniapp.dcloud.io/uni-app-x/css/'" :text="'https://uniapp.dcloud.io/uni-app-x/css/'" <u-link :href="'https://uniapp.dcloud.io/uni-app-x/css/'" :text="'https://uniapp.dcloud.io/uni-app-x/css/'"
:inWhiteList="true"></u-link> :inWhiteList="true"></u-link>
</view> </view>
<uni-collapse> <uni-collapse>
<uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name" <uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
class="item"> class="item">
<view v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item" hover-class="is--active" <view style='padding-left:18px;' v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item"
@click="goPage(`/${page.path}`)"> hover-class="is--active" @click="goPage(`/${page.path}`)">
<text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{ <text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{
page.style["navigationBarTitleText"] page.style["navigationBarTitleText"]
}}</text> }}</text>
<image :src="arrowRightIcon" class="uni-icon-size"></image> <image :src="arrowRightIcon" class="uni-icon-size"></image>
</view> </view>
<uni-collapse style="width: 100%" v-for="childMenu in menuItem.children" :key="childMenu!.id"> <uni-collapse style="width: 100%" v-for="childMenu in menuItem.children" :key="childMenu!.id">
<uni-collapse-item :title="childMenu.name" class="item" style="margin-bottom: 0"> <uni-collapse-item :title="childMenu.name" class="item"
<view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu.pages" style="margin-bottom: 0;padding-left: 5px;padding-right: 5px;">
:key="childPage!.path" @click="goPage(`/${childPage.path}`)"> <view style='padding-left: 18px;' class="uni-navigate-item" hover-class="is--active"
<text class="uni-navigate-text">{{ v-for="childPage in childMenu.pages" :key="childPage!.path" @click="goPage(`/${childPage.path}`)">
childPage.style["navigationBarTitleText"] <text class="uni-navigate-text"
}}</text> :class="{'left-win-active': leftWinActive === childPage.path && hasLeftWin}">{{
<image :src="arrowRightIcon" class="uni-icon-size"></image> childPage.style["navigationBarTitleText"]
</view> }}</text>
</uni-collapse-item> <image :src="arrowRightIcon" class="uni-icon-size"></image>
</uni-collapse> </view>
</uni-collapse-item> </uni-collapse-item>
</uni-collapse>
</uni-collapse-item>
</uni-collapse> </uni-collapse>
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
...@@ -41,9 +43,9 @@ ...@@ -41,9 +43,9 @@
</template> </template>
<script lang="uts"> <script lang="uts">
import { generateMenu } from './generateMenu.uts' import { generateMenu } from './generateMenu.uts'
import { MenuItem } from './generateMenu.uts' import { MenuItem } from './generateMenu.uts'
const menu = generateMenu('pages/CSS') const menu = generateMenu('pages/CSS')
import { state } from '@/store/index.uts' import { state } from '@/store/index.uts'
export default { export default {
data() { data() {
...@@ -51,36 +53,36 @@ ...@@ -51,36 +53,36 @@
menu: menu as (MenuItem | null)[], menu: menu as (MenuItem | null)[],
arrowRightIcon: '/static/icons/arrow-right.png', arrowRightIcon: '/static/icons/arrow-right.png',
} }
}, },
computed: { computed: {
hasLeftWin():boolean{ hasLeftWin() : boolean {
return !state.noMatchLeftWindow return !state.noMatchLeftWindow
}, },
leftWinActive():string{ leftWinActive() : string {
return state.leftWinActive.slice(1) return state.leftWinActive.slice(1)
} }
}, },
methods: { methods: {
goPage(url : string) { goPage(url : string) {
uni.navigateTo({ url }) uni.navigateTo({ url })
}, },
}, },
// #ifdef WEB // #ifdef WEB
watch:{ watch: {
$route: { $route: {
immediate: true, immediate: true,
handler(newRoute) { handler(newRoute) {
if (newRoute.matched.length) { if (newRoute.matched.length) {
const activeCategoryIndex = this.menu.findIndex(menuItem => menuItem?.pages.some(page => this.leftWinActive && this.leftWinActive === page?.path)) const activeCategoryIndex = this.menu.findIndex(menuItem => menuItem?.pages.some(page => this.leftWinActive && this.leftWinActive === page?.path))
if (activeCategoryIndex > -1) { if (activeCategoryIndex > -1) {
this.$nextTick(() => { this.$nextTick(() => {
((this.$refs.category as ComponentPublicInstance[])[activeCategoryIndex]).$callMethod('openCollapse', true) ((this.$refs.category as ComponentPublicInstance[])[activeCategoryIndex]).$callMethod('openCollapse', true)
}) })
} }
} }
} }
} }
}, },
// #endif // #endif
} }
</script> </script>
......
pages/tabBar/component.uvue
浏览文件 @ 8e917c1b
...@@ -11,28 +11,30 @@ ...@@ -11,28 +11,30 @@
<u-link :href="'https://uniapp.dcloud.io/uni-app-x/component/'" <u-link :href="'https://uniapp.dcloud.io/uni-app-x/component/'"
:text="'https://uniapp.dcloud.io/uni-app-x/component/'" :inWhiteList="true"></u-link> :text="'https://uniapp.dcloud.io/uni-app-x/component/'" :inWhiteList="true"></u-link>
</view> </view>
<uni-collapse> <uni-collapse>
<uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name" <uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
class="item"> class="item">
<view v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item" hover-class="is--active" <view style='padding-left:18px;' v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item"
@click="goPage(`/${page.path}`)"> hover-class="is--active" @click="goPage(`/${page.path}`)">
<text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{ <text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{
page.style["navigationBarTitleText"] page.style["navigationBarTitleText"]
}}</text> }}</text>
<image :src="arrowRightIcon" class="uni-icon-size"></image> <image :src="arrowRightIcon" class="uni-icon-size"></image>
</view> </view>
<uni-collapse style="width: 100%" v-for="childMenu in menuItem.children" :key="childMenu!.id"> <uni-collapse style="width: 100%" v-for="childMenu in menuItem.children" :key="childMenu!.id">
<uni-collapse-item :title="childMenu.name" class="item" style="margin-bottom: 0"> <uni-collapse-item :title="childMenu.name" class="item"
<view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu.pages" style="margin-bottom: 0;padding-left: 5px;padding-right: 5px;">
:key="childPage!.path" @click="goPage(`/${childPage.path}`)"> <view style='padding-left: 18px;' class="uni-navigate-item" hover-class="is--active"
<text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === childPage.path && hasLeftWin}">{{ v-for="childPage in childMenu.pages" :key="childPage!.path" @click="goPage(`/${childPage.path}`)">
childPage.style["navigationBarTitleText"] <text class="uni-navigate-text"
}}</text> :class="{'left-win-active': leftWinActive === childPage.path && hasLeftWin}">{{
<image :src="arrowRightIcon" class="uni-icon-size"></image> childPage.style["navigationBarTitleText"]
</view> }}</text>
</uni-collapse-item> <image :src="arrowRightIcon" class="uni-icon-size"></image>
</uni-collapse> </view>
</uni-collapse-item> </uni-collapse-item>
</uni-collapse>
</uni-collapse-item>
</uni-collapse> </uni-collapse>
<!-- #ifdef UNI-APP-X && APP --> <!-- #ifdef UNI-APP-X && APP -->
...@@ -59,15 +61,15 @@ ...@@ -59,15 +61,15 @@
arrowRightIcon: '/static/icons/arrow-right.png' as string.ImageURIString, arrowRightIcon: '/static/icons/arrow-right.png' as string.ImageURIString,
pageHiden: false pageHiden: false
} }
}, },
computed: { computed: {
hasLeftWin():boolean{ hasLeftWin() : boolean {
return !state.noMatchLeftWindow return !state.noMatchLeftWindow
}, },
leftWinActive():string{ leftWinActive() : string {
return state.leftWinActive.slice(1) return state.leftWinActive.slice(1)
} }
}, },
methods: { methods: {
goPage(url : string) { goPage(url : string) {
uni.navigateTo({ url }) uni.navigateTo({ url })
...@@ -84,23 +86,23 @@ ...@@ -84,23 +86,23 @@
uni.showTabBar()?.catch(_ => { }) uni.showTabBar()?.catch(_ => { })
} }
// #endif // #endif
}, },
// #ifdef WEB // #ifdef WEB
watch:{ watch: {
$route: { $route: {
immediate: true, immediate: true,
handler(newRoute) { handler(newRoute) {
if (newRoute.matched.length) { if (newRoute.matched.length) {
const activeCategoryIndex = this.menu.findIndex(menuItem => menuItem?.pages.some(page => this.leftWinActive && this.leftWinActive === page?.path)) const activeCategoryIndex = this.menu.findIndex(menuItem => menuItem?.pages.some(page => this.leftWinActive && this.leftWinActive === page?.path))
if (activeCategoryIndex > -1) { if (activeCategoryIndex > -1) {
this.$nextTick(() => { this.$nextTick(() => {
((this.$refs.category as ComponentPublicInstance[])[activeCategoryIndex])?.$callMethod('openCollapse', true) ((this.$refs.category as ComponentPublicInstance[])[activeCategoryIndex])?.$callMethod('openCollapse', true)
}) })
} }
} }
} }
} }
}, },
// #endif // #endif
onReady() { onReady() {
// #ifdef UNI-APP-X && APP // #ifdef UNI-APP-X && APP
......
pages/tabBar/template.uvue
浏览文件 @ 8e917c1b
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</image> </image>
</view> </view>
<view v-if="item.open"> <view v-if="item.open">
<view class="uni-navigate-item" :hover-class="page.enable == false ? '' : 'is--active'" <view style="padding-left: 18px;" class="uni-navigate-item" :hover-class="page.enable == false ? '' : 'is--active'"
v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)"> v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
<text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.url && hasLeftWin,'text-disabled' : page.enable == false}">{{ page.name }}</text> <text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.url && hasLeftWin,'text-disabled' : page.enable == false}">{{ page.name }}</text>
<image :src="arrowRightIcon" class="uni-icon-size"></image> <image :src="arrowRightIcon" class="uni-icon-size"></image>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或