1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<template>
<view class="top-window-header">
<view class="left-header logo">
<navigator class="logo" open-type="reLaunch" url="/pages/component/view/view">
<image src="../static/logo.png" mode="heightFix" style="width: 30px;"></image>
<text>hello uni-app</text>
</navigator>
</view>
<custom-tab-bar class="tab-bar-flex" direction="horizontal" :show-icon="false" :selected="current"
@onTabItemTap="toSecondMenu" />
<!-- #ifdef H5-DEMO -->
<uni-link class="phone-link" href="/en" text="英文版"></uni-link>
<uni-link class="phone-link" href="https://m3w.cn/uniapp" text="体验手机版"></uni-link>
<!-- #ifdef VUE2 -->
<uni-link class="phone-link" href="http://vue3-hellouniapp.dcloud.net.cn/pages/component/view/view" text="体验 vue 3.0 版"></uni-link>
<svg t="1628163727478" class="new-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="1334" width="40" height="40">
<path
d="M829.866667 313.6a64 64 0 0 1 64 64v213.333333a64 64 0 0 1-64 64H262.058667L168.32 746.666667v-106.666667h0.213333V377.6a64 64 0 0 1 64-64h597.333334z m-117.333334 78.293333H661.333333l-23.466666 138.56-19.2-136.533333h-51.2l34.133333 174.677333h68.266667l19.2-116.458666 17.066666 116.458666h68.266667l34.133333-174.677333h-51.2l-17.066666 138.538667-27.733334-140.544z m-151.466666 0h-125.866667v174.698667h125.866667v-36.138667h-78.933334v-38.165333h68.266667v-32.106667h-68.266667v-34.133333h78.933334v-34.133333z m-217.6 0h-70.4v174.698667H320v-128.512l32 128.512h70.4V391.893333h-46.933333v134.506667l-32-134.506667z"
p-id="1335" fill="#d81e06"></path>
</svg>
<!-- #endif -->
<!-- #ifdef VUE3 -->
<uni-link class="phone-link" href="http://hellouniapp.dcloud.net.cn/" text="体验 vue 2.x 版"></uni-link>
<!-- #endif -->
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
selected: {
component: 0,
API: 1,
extUI: 2,
template: 3
},
current: 0,
indexPage: [{
tabBar: '/pages/tabBar/component/component',
index: '/pages/component/view/view'
}, {
tabBar: '/pages/tabBar/API/API',
index: '/pages/API/set-navigation-bar-title/set-navigation-bar-title'
}, {
tabBar: '/pages/tabBar/extUI/extUI',
index: '/pages/extUI/badge/badge'
}, {
tabBar: '/pages/tabBar/template/template',
index: '/pages/template/nav-button/nav-button'
}]
}
},
watch: {
$route: {
immediate: true,
handler(newRoute) {
const width = uni.getSystemInfoSync().screenWidth
if (width >= 768) {
let path = newRoute.path
let comp
if (path === '/') {
comp = 'component'
path = '/pages/tabBar/component/component'
} else {
comp = path.split('/')[2]
}
this.current = this.selected[comp]
for (const item of this.indexPage) {
if (path === item.tabBar) {
uni.redirectTo({
url: item.index
})
}
}
}
}
}
},
mounted() {},
methods: {
toSecondMenu(e) {
const activeTabBar = '/' + e.pagePath
for (const item of this.indexPage) {
if (activeTabBar === item.tabBar) {
uni.redirectTo({
url: item.index
})
}
}
}
}
}
</script>
<style>
.top-window-header {
height: 60px;
padding: 0 15px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
border-bottom: 1px solid #e1e1e1;
background-color: #FFFFFF;
color: #333;
}
.logo {
display: flex;
flex-direction: row;
align-items: center;
flex: 1;
}
.logo image {
height: 30px;
width: 30px;
}
.logo text {
margin-left: 8px;
}
.right-header {
display: flex;
flex-direction: row;
color: #333;
}
.right-header-item {
line-height: 25px;
margin-left: 40px;
cursor: pointer;
font-size: 16px;
}
.active {
color: #4cd964;
border-bottom: 2px solid;
}
.tab-bar-flex {
width: 360px;
}
.phone-link {
padding-left: 20px;
cursor: pointer;
}
.new-icon {
margin-left: -3px;
/* margin-right: 5px; */
margin-top: -20px;
}
</style>