Hugging Face's logo

Spaces:
duqing026
/
uniapp-miniprogram
Running

App Files Community
Trae Assistant commited on
Commit
0cd5390
·
1 Parent(s): bebf4ea

fix: enforce H5 layout constraints and fix scrolling/tabbar issues

Browse files
Files changed (1) hide show
  1. src/App.vue +32 -18
src/App.vue CHANGED
@@ -11,60 +11,74 @@ onHide(() => {
11
  });
12
  </script>
13
  <style lang="scss">
14
- /* H5 网页全局布局优化：限制最大宽度并居中，模拟手机显示效果 */
15
  /* #ifdef H5 */
 
16
  body {
17
- background-color: #f5f5f5 !important; /* 外部背景色 */
 
 
18
  }
19
 
20
- /* 限制应用根容器宽度，并在 PC 端居中 */
21
  uni-app {
22
  max-width: 450px !important;
 
23
  margin: 0 auto !important;
24
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
25
  background-color: #fff;
26
- min-height: 100vh;
27
- display: block;
 
 
28
  }
29
 
30
- /* 头部导航栏：限制宽度并居中 */
31
  uni-page-head {
32
  max-width: 450px !important;
33
  left: 0 !important;
34
  right: 0 !important;
35
  margin: 0 auto !important;
 
 
36
  }
37
 
38
- /* 底部 TabBar：限制宽度并居中 */
39
  uni-tabbar {
40
  max-width: 450px !important;
41
  left: 0 !important;
42
  right: 0 !important;
43
  margin: 0 auto !important;
 
 
 
 
 
 
 
 
 
 
44
  }
45
 
46
- /* 内容区域背景色 */
47
  uni-page-wrapper {
48
  background-color: #fff !important;
 
 
 
49
  }
50
 
51
- /* 隐藏 H5 默认的滚动条样式，使其看起来更像手机应用 */
52
  ::-webkit-scrollbar {
53
  display: none;
54
  width: 0 !important;
55
  height: 0 !important;
56
- -webkit-appearance: none;
57
- background: transparent;
58
  }
59
 
60
- /* 修复标题栏可能出现的文字偏移或显示不全问题 */
61
- .uni-page-head-hd,
62
- .uni-page-head-ft {
63
- width: auto !important;
64
- }
65
  .uni-page-head-bd {
66
- flex: 1 !important;
67
- overflow: hidden !important;
68
  }
69
  /* #endif */
70
  </style>
 
11
  });
12
  </script>
13
  <style lang="scss">
14
+ /* H5 网页全局布局优化：严格模拟手机端居中显示 */
15
  /* #ifdef H5 */
16
+ html,
17
  body {
18
+ background-color: #f5f5f5 !important;
19
+ height: 100%;
20
+ overflow: hidden; /* 禁止最外层 body 滚动 */
21
  }
22
 
 
23
  uni-app {
24
  max-width: 450px !important;
25
+ height: 100% !important;
26
  margin: 0 auto !important;
27
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
28
  background-color: #fff;
29
+ display: flex;
30
+ flex-direction: column;
31
+ position: relative;
32
+ overflow: hidden; /* 内部容器自包含 */
33
  }
34
 
35
+ /* 头部导航栏：强制居中且宽度一致 */
36
  uni-page-head {
37
  max-width: 450px !important;
38
  left: 0 !important;
39
  right: 0 !important;
40
  margin: 0 auto !important;
41
+ position: fixed !important;
42
+ z-index: 999;
43
  }
44
 
45
+ /* 底部 TabBar：强制居中且宽度一致 */
46
  uni-tabbar {
47
  max-width: 450px !important;
48
  left: 0 !important;
49
  right: 0 !important;
50
  margin: 0 auto !important;
51
+ position: fixed !important;
52
+ z-index: 999;
53
+
54
+ /* 针对 uni-tabbar 内部容器的特殊处理，防止内容溢出 */
55
+ .uni-tabbar {
56
+ max-width: 450px !important;
57
+ margin: 0 auto !important;
58
+ left: 0 !important;
59
+ right: 0 !important;
60
+ }
61
  }
62
 
63
+ /* 内容区域：允许内部滚动，解决无内容却能滚动的问题 */
64
  uni-page-wrapper {
65
  background-color: #fff !important;
66
+ height: 100% !important;
67
+ overflow-y: auto !important; /* 只在内容区允许滚动 */
68
+ -webkit-overflow-scrolling: touch;
69
  }
70
 
71
+ /* 隐藏滚动条 */
72
  ::-webkit-scrollbar {
73
  display: none;
74
  width: 0 !important;
75
  height: 0 !important;
 
 
76
  }
77
 
78
+ /* 修复标题栏显示 */
 
 
 
 
79
  .uni-page-head-bd {
80
+ font-size: 16px !important;
81
+ font-weight: bold !important;
82
  }
83
  /* #endif */
84
  </style>