Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 b04647ff 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

refactor: 优化 tabBar 内项目展示顺序

上级 39686008
隐藏空白更改
内联 并排
Showing with 108 addition and 88 deletion
pages/tabBar/API.uvue
浏览文件 @ b04647ff
...@@ -14,26 +14,29 @@ ...@@ -14,26 +14,29 @@
<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 style='padding-left:18px;' v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item" <template v-for="childMenuItem in menuItem.items" :key="childMenuItem!.id">
hover-class="is--active" @click="goPage(`/${page.path}`)"> <view v-if="childMenuItem.items.length==0" style="padding-left: 18px" class="uni-navigate-item"
<text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{ hover-class="is--active" @click="goPage(`/${childMenuItem.path}`)">
page.style["navigationBarTitleText"] <text class="uni-navigate-text" :class="{
}}</text> 'left-win-active': leftWinActive === childMenuItem.path && hasLeftWin,
<image :src="arrowRightIcon" class="uni-icon-size"></image> }">{{ childMenuItem.style["navigationBarTitleText"] }}</text>
</view> <image :src="arrowRightIcon" class="uni-icon-size"></image>
<uni-collapse style="width: 100%" v-for="childMenu in menuItem.children" :key="childMenu!.id"> </view>
<uni-collapse-item :title="childMenu.name" class="item" <uni-collapse v-else style="width: 100%">
style="margin-bottom: 0;padding-left: 5px;padding-right: 5px;"> <uni-collapse-item :title="childMenuItem.name" class="item"
<view style='padding-left: 18px;' class="uni-navigate-item" hover-class="is--active" style="margin-bottom: 0; padding-left: 5px; padding-right: 5px">
v-for="childPage in childMenu.pages" :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="grandChildMenuItem in childMenuItem.items" :key="grandChildMenuItem!.path"
:class="{'left-win-active': leftWinActive === childPage.path && hasLeftWin}">{{ @click="goPage(`/${grandChildMenuItem.path}`)">
childPage.style["navigationBarTitleText"] <text class="uni-navigate-text" :class="{
}}</text> 'left-win-active':
<image :src="arrowRightIcon" class="uni-icon-size"></image> leftWinActive === grandChildMenuItem.path && hasLeftWin,
</view> }">{{ grandChildMenuItem.style["navigationBarTitleText"] }}</text>
</uni-collapse-item> <image :src="arrowRightIcon" class="uni-icon-size"></image>
</uni-collapse> </view>
</uni-collapse-item>
</uni-collapse>
</template>
</uni-collapse-item> </uni-collapse-item>
</uni-collapse> </uni-collapse>
<view v-if="!hasLeftWin" ref="pop" @click="hidePop()" class="popup"> <view v-if="!hasLeftWin" ref="pop" @click="hidePop()" class="popup">
...@@ -91,7 +94,7 @@ ...@@ -91,7 +94,7 @@
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?.items.some(item => this.leftWinActive && this.leftWinActive === item?.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)
......
pages/tabBar/CSS.uvue
浏览文件 @ b04647ff
...@@ -14,26 +14,29 @@ ...@@ -14,26 +14,29 @@
<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 style='padding-left:18px;' v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item" <template v-for="childMenuItem in menuItem.items" :key="childMenuItem!.id">
hover-class="is--active" @click="goPage(`/${page.path}`)"> <view v-if="childMenuItem.items.length==0" style="padding-left: 18px" class="uni-navigate-item"
<text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{ hover-class="is--active" @click="goPage(`/${childMenuItem.path}`)">
page.style["navigationBarTitleText"] <text class="uni-navigate-text" :class="{
}}</text> 'left-win-active': leftWinActive === childMenuItem.path && hasLeftWin,
<image :src="arrowRightIcon" class="uni-icon-size"></image> }">{{ childMenuItem.style["navigationBarTitleText"] }}</text>
</view> <image :src="arrowRightIcon" class="uni-icon-size"></image>
<uni-collapse style="width: 100%" v-for="childMenu in menuItem.children" :key="childMenu!.id"> </view>
<uni-collapse-item :title="childMenu.name" class="item" <uni-collapse v-else style="width: 100%">
style="margin-bottom: 0;padding-left: 5px;padding-right: 5px;"> <uni-collapse-item :title="childMenuItem.name" class="item"
<view style='padding-left: 18px;' class="uni-navigate-item" hover-class="is--active" style="margin-bottom: 0; padding-left: 5px; padding-right: 5px">
v-for="childPage in childMenu.pages" :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="grandChildMenuItem in childMenuItem.items" :key="grandChildMenuItem!.path"
:class="{'left-win-active': leftWinActive === childPage.path && hasLeftWin}">{{ @click="goPage(`/${grandChildMenuItem.path}`)">
childPage.style["navigationBarTitleText"] <text class="uni-navigate-text" :class="{
}}</text> 'left-win-active':
<image :src="arrowRightIcon" class="uni-icon-size"></image> leftWinActive === grandChildMenuItem.path && hasLeftWin,
</view> }">{{ grandChildMenuItem.style["navigationBarTitleText"] }}</text>
</uni-collapse-item> <image :src="arrowRightIcon" class="uni-icon-size"></image>
</uni-collapse> </view>
</uni-collapse-item>
</uni-collapse>
</template>
</uni-collapse-item> </uni-collapse-item>
</uni-collapse> </uni-collapse>
</view> </view>
...@@ -73,7 +76,7 @@ ...@@ -73,7 +76,7 @@
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?.items.some(item => this.leftWinActive && this.leftWinActive === item?.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)
......
pages/tabBar/component.uvue
浏览文件 @ b04647ff
...@@ -14,26 +14,29 @@ ...@@ -14,26 +14,29 @@
<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 style='padding-left:18px;' v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item" <template v-for="childMenuItem in menuItem.items" :key="childMenuItem!.id">
hover-class="is--active" @click="goPage(`/${page.path}`)"> <view v-if="childMenuItem.items.length==0" style="padding-left: 18px" class="uni-navigate-item"
<text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{ hover-class="is--active" @click="goPage(`/${childMenuItem.path}`)">
page.style["navigationBarTitleText"] <text class="uni-navigate-text" :class="{
}}</text> 'left-win-active': leftWinActive === childMenuItem.path && hasLeftWin,
<image :src="arrowRightIcon" class="uni-icon-size"></image> }">{{ childMenuItem.style["navigationBarTitleText"] }}</text>
</view> <image :src="arrowRightIcon" class="uni-icon-size"></image>
<uni-collapse style="width: 100%" v-for="childMenu in menuItem.children" :key="childMenu!.id"> </view>
<uni-collapse-item :title="childMenu.name" class="item" <uni-collapse v-else style="width: 100%">
style="margin-bottom: 0;padding-left: 5px;padding-right: 5px;"> <uni-collapse-item :title="childMenuItem.name" class="item"
<view style='padding-left: 18px;' class="uni-navigate-item" hover-class="is--active" style="margin-bottom: 0; padding-left: 5px; padding-right: 5px">
v-for="childPage in childMenu.pages" :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="grandChildMenuItem in childMenuItem.items" :key="grandChildMenuItem!.path"
:class="{'left-win-active': leftWinActive === childPage.path && hasLeftWin}">{{ @click="goPage(`/${grandChildMenuItem.path}`)">
childPage.style["navigationBarTitleText"] <text class="uni-navigate-text" :class="{
}}</text> 'left-win-active':
<image :src="arrowRightIcon" class="uni-icon-size"></image> leftWinActive === grandChildMenuItem.path && hasLeftWin,
</view> }">{{ grandChildMenuItem.style["navigationBarTitleText"] }}</text>
</uni-collapse-item> <image :src="arrowRightIcon" class="uni-icon-size"></image>
</uni-collapse> </view>
</uni-collapse-item>
</uni-collapse>
</template>
</uni-collapse-item> </uni-collapse-item>
</uni-collapse> </uni-collapse>
...@@ -93,7 +96,7 @@ ...@@ -93,7 +96,7 @@
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?.items.some(item => this.leftWinActive && this.leftWinActive === item?.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)
......
pages/tabBar/generateMenu.uts
浏览文件 @ b04647ff
...@@ -15,15 +15,17 @@ type PageGroup = { ...@@ -15,15 +15,17 @@ type PageGroup = {
type Page = { type Page = {
path : string, path : string,
style : UTSJSONObject, style : UTSJSONObject,
group ?: string | null group ?: string | null,
} }
export type MenuItem = { export type MenuItem = {
id : string, id : string,
name : string, name : string,
index : number, index : number,
children : (MenuItem | null)[], path : string,
pages : (Page | null)[] style : UTSJSONObject,
group ?: string | null,
items : (MenuItem | null)[]
} }
export function generateMenu(tabBarType : string) : (MenuItem | null)[] { export function generateMenu(tabBarType : string) : (MenuItem | null)[] {
...@@ -37,6 +39,7 @@ export function generateMenu(tabBarType : string) : (MenuItem | null)[] { ...@@ -37,6 +39,7 @@ export function generateMenu(tabBarType : string) : (MenuItem | null)[] {
let currentGroups : (Group | null)[] | null = groupTree let currentGroups : (Group | null)[] | null = groupTree
const pageGroups : PageGroup[] = [] const pageGroups : PageGroup[] = []
groupIndexList.forEach((groupIndex, index) => { groupIndexList.forEach((groupIndex, index) => {
// 跳过第一层 component API CSS
if (index > 0) { if (index > 0) {
pageGroups.push({ id: currentGroups![groupIndex]!.id, name: currentGroups![groupIndex]!.name, index: groupIndex } as PageGroup) pageGroups.push({ id: currentGroups![groupIndex]!.id, name: currentGroups![groupIndex]!.name, index: groupIndex } as PageGroup)
} }
...@@ -60,27 +63,39 @@ export function generateMenu(tabBarType : string) : (MenuItem | null)[] { ...@@ -60,27 +63,39 @@ export function generateMenu(tabBarType : string) : (MenuItem | null)[] {
id: id.split('.').slice(-1)[0], id: id.split('.').slice(-1)[0],
name, name,
index: validIndex, index: validIndex,
children: [] as (MenuItem | null)[], path: '',
pages: [] as (Page | null)[] style: {},
group: '',
items: [] as (MenuItem | null)[],
} as MenuItem } as MenuItem
} }
currentMenu = menuItemArr[validIndex] currentMenu = menuItemArr[validIndex]
if (groupIndex < groupLength - 1) { if (groupIndex < groupLength - 1) {
menuItemArr = menuItemArr[validIndex]!.children as (MenuItem | null)[] menuItemArr = menuItemArr[validIndex]!.items as (MenuItem | null)[]
} }
}) })
const pageMenuItem : MenuItem = {
id: page.path,
name: page.style["navigationBarTitleText"] as string,
index: lastGroup.index,
path: page.path,
style: page.style,
group: page.group,
items: [] as (MenuItem | null)[],
}
if (hasPageGroup) { if (hasPageGroup) {
const pageIndex = lastGroup.index const pageIndex = lastGroup.index
fillPageArrayWithNull(currentMenu!.pages, pageIndex) fillMenuArrayWithNull(currentMenu!.items, pageIndex)
if (currentMenu!.pages[pageIndex] == null) { if (currentMenu!.items[pageIndex] == null) {
currentMenu!.pages[pageIndex] = page currentMenu!.items[pageIndex] = pageMenuItem
} else { } else {
currentMenu!.pages.push(page) currentMenu!.items.push(pageMenuItem)
} }
} else { } else {
currentMenu!.pages.push(page) currentMenu!.items.push(pageMenuItem)
} }
}) })
...@@ -116,24 +131,15 @@ function fillMenuArrayWithNull(arr : (MenuItem | null)[], index : number) : void ...@@ -116,24 +131,15 @@ function fillMenuArrayWithNull(arr : (MenuItem | null)[], index : number) : void
} }
} }
function fillPageArrayWithNull(arr : (Page | null)[], index : number) : void {
const len = arr.length
for (let i = 0; i <= index - (len - 1); i++) {
arr.push(null)
}
}
function removeNullItem(arr : (MenuItem | null)[]) : (MenuItem | null)[] { function removeNullItem(arr : (MenuItem | null)[]) : (MenuItem | null)[] {
const res = arr.filter((item : MenuItem | null) : boolean => item !== null) const res = arr.filter((item : MenuItem | null) : boolean => item !== null)
res.forEach(menuItem => { res.forEach(menuItem => {
addSetTabBarPage(menuItem!) addSetTabBarPage(menuItem!)
// #ifdef APP-ANDROID // #ifdef APP-ANDROID
menuItem.children = removeNullItem(menuItem.children) menuItem.items = removeNullItem(menuItem.items)
menuItem.pages = menuItem.pages.filter((item : Page | null) : boolean => item !== null)
// #endif // #endif
// #ifndef APP-ANDROID // #ifndef APP-ANDROID
menuItem!.children = removeNullItem(menuItem!.children) menuItem!.items = removeNullItem(menuItem!.items)
menuItem!.pages = menuItem!.pages.filter((item : Page | null) : boolean => item !== null)
// #endif // #endif
}) })
return res return res
...@@ -142,11 +148,16 @@ function removeNullItem(arr : (MenuItem | null)[]) : (MenuItem | null)[] { ...@@ -142,11 +148,16 @@ function removeNullItem(arr : (MenuItem | null)[]) : (MenuItem | null)[] {
function addSetTabBarPage(menuItem : MenuItem) { function addSetTabBarPage(menuItem : MenuItem) {
const { id, name } = menuItem const { id, name } = menuItem
if (id == 'page' && name == '页面和路由' && !state.noMatchLeftWindow) { if (id == 'page' && name == '页面和路由' && !state.noMatchLeftWindow) {
menuItem.pages.push({ menuItem.items.push({
id: 'set-tab-bar',
name: '设置 TabBar',
index: 0,
path: 'set-tab-bar', path: 'set-tab-bar',
style: { style: {
navigationBarTitleText: '设置 TabBar' navigationBarTitleText: '设置 TabBar'
} },
} as Page) group: null,
items: []
} as MenuItem)
} }
} }
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或