Skip to content

Screen adaptation #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 7 commits into from
Closed

Screen adaptation #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5abbe3d
fix: Screen adaptation
ljt990218 Mar 23, 2024
ad01968
fix: Screen adaptation
ljt990218 Mar 23, 2024
20766c3
fix: Screen adaptation
ljt990218 Mar 23, 2024
0a87879
fix: Screen adaptation
ljt990218 Mar 23, 2024
8ba0d07
fix: Screen adaptation
ljt990218 Mar 23, 2024
51f2318
fix: Screen adaptation
ljt990218 Mar 23, 2024
1d49eb0
Merge branch 'main' of github.com:ljt990218/vue3-vant-mobile into main
ljt990218 Mar 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 34 additions & 24 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
<link rel="apple-touch-icon" href="/pwa-192x192.png" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#f6d2d2">
<meta name="msapplication-TileColor" content="#f6d2d2">
<script>
;(function () {
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
if (setting === 'dark' || (prefersDark && setting !== 'light'))
document.documentElement.classList.toggle('dark', true)
})()
</script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<noscript>
This website requires JavaScript to function properly.
Please enable JavaScript to continue.
</noscript>
</body>
</html>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<link rel="apple-touch-icon" href="/pwa-192x192.png" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#f6d2d2">
<meta name="msapplication-TileColor" content="#f6d2d2">
<script>
; (function () {
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
if (setting === 'dark' || (prefersDark && setting !== 'light'))
document.documentElement.classList.toggle('dark', true)
})()
</script>
</head>

<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<noscript>
This website requires JavaScript to function properly.
Please enable JavaScript to continue.
</noscript>
</body>

<script>
let app = document.querySelector('#app')
window.addEventListener('load', function () {
app.style.minHeight = window.innerHeight + 'px'
Copy link
Collaborator

@cwandev cwandev Mar 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不建议在应用入口处设置监听事件

})
</script>

</html>
12 changes: 9 additions & 3 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,22 @@ const { initializeThemeSwitcher } = useAutoThemeSwitcher(appStore)
onMounted(() => {
initializeThemeSwitcher()
})

const appSrapperTop = ref('0px')
const appSrapperHeight = ref('calc( 100% - 0px )')
const router = useRouter()
router.beforeEach((to) => {
to.meta.title !== undefined ? appSrapperTop.value = '46px' : appSrapperTop.value = '0px'
to.meta.title !== undefined ? appSrapperHeight.value = 'calc( 100% - 46px )' : appSrapperHeight.value = 'calc( 100% - 0px )'
})
Copy link
Collaborator

@cwandev cwandev Mar 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这段代码块可能不利于后期维护

</script>

<template>
<VanConfigProvider :theme="mode">
<NavBar />
<router-view v-slot="{ Component, route }">
<transition :name="routeTransitionName">
<div :key="route.name" class="app-wrapper">
<div :key="route.name" class="app-wrapper" :style="{ top: appSrapperTop, height: appSrapperHeight }">
<component :is="Component" />
</div>
</transition>
Expand All @@ -54,9 +62,7 @@ onMounted(() => {
<style scoped>
.app-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 46px;
left: 0;
overflow-y: auto;
}
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/404.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ const router = useRouter()
</script>

<template>
<main p="x4 y16" text-18 text="center gray-300 dark:gray-200">
<main p="x4 y62" text-18 text="center gray-300 dark:gray-200">
Copy link
Collaborator

@cwandev cwandev Mar 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里为什么要修改呢

Copy link
Member Author

@ljt990218 ljt990218 Mar 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在我的PR中，我把没有导航栏的页面 .app-wrapper的top值设为0，所以增加了 404.vue的padding值

Copy link
Collaborator

@cwandev cwandev Mar 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

了解

<van-icon name="warn-o" size="3em" />

<RouterView />
Expand Down
22 changes: 12 additions & 10 deletions src/pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,17 +34,19 @@ const menuItems = [
</script>

<template>
<VanCellGroup inset>
<VanCell center title="🌗 暗黑模式">
<template #right-icon>
<VanSwitch v-model="checked" size="20px" aria-label="on/off Dark Mode" @click="toggle()" />
<div class="m-t-46">
Copy link
Collaborator

@cwandev cwandev Mar 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个外层容器也可去掉

<VanCellGroup inset>
<VanCell center title="🌗 暗黑模式">
<template #right-icon>
<VanSwitch v-model="checked" size="20px" aria-label="on/off Dark Mode" @click="toggle()" />
</template>
</VanCell>

<template v-for="item in menuItems" :key="item.route">
<VanCell :title="item.title" :to="item.route" is-link />
</template>
</VanCell>

<template v-for="item in menuItems" :key="item.route">
<VanCell :title="item.title" :to="item.route" is-link />
</template>
</VanCellGroup>
</VanCellGroup>
</div>
</template>

<route lang="yaml">
Expand Down
2 changes: 1 addition & 1 deletion src/styles/app.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
#app {
min-height: 100vh;
position: relative;
overflow-x: hidden;
overflow-y: scroll;
}

html {
Expand Down