You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
163 lines
4.1 KiB
163 lines
4.1 KiB
<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>
|
|
|