UNPKG

3.89 kBJavaScriptView Raw
1/**
2 * 插入页面动画需要的样式
3 */
4function loadAnimateStyle(ms = 300) {
5 const css = `
6body {
7 /* 防止 iOS 页面滚动 */
8 overflow: hidden;
9}
10.taro_router > .taro_page {
11 position: absolute;
12 left: 0;
13 top: 0;
14 width: 100%;
15 height: 100%;
16 background-color: #fff;
17 transform: translate(100%, 0);
18 transition: transform ${ms}ms;
19 z-index: 0;
20}
21
22.taro_router > .taro_page.taro_tabbar_page,
23.taro_router > .taro_page.taro_page_show.taro_page_stationed {
24 transform: none;
25 transition: none;
26}
27
28.taro_router > .taro_page.taro_page_show {
29 transform: translate(0, 0);
30}
31`;
32 addStyle(css);
33}
34/**
35 * 插入路由相关样式
36 */
37function loadRouterStyle(enableTabBar, enableWindowScroll, enhanceAnimation) {
38 const css = `
39 .taro_router {
40 position: relative;
41 width: 100%;
42 height: 100%;
43 }
44
45 .taro_page {
46 width: 100%;
47 height: 100%;
48${enableWindowScroll ? '' : `
49 overflow-x: hidden;
50 overflow-y: scroll;
51 max-height: 100vh;
52`}
53 }
54${enableTabBar ? `
55 .taro-tabbar__container > .taro-tabbar__panel {
56 overflow: hidden;
57 }
58
59 .taro-tabbar__container > .taro-tabbar__panel > .taro_page.taro_tabbar_page {
60 max-height: calc(100vh - var(--taro-tabbar-height) - constant(safe-area-inset-bottom));
61 max-height: calc(100vh - var(--taro-tabbar-height) - env(safe-area-inset-bottom));
62 }
63
64` : ''}
65${enhanceAnimation
66 ? `.taro_page_shade:has(+.taro_page_stationed),
67 .taro_page_shade.taro_tabbar_page,
68 .taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child):has(+.taro_page_stationed) {
69 display: none;
70 }` : ` .taro_page_shade,
71 .taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child) {
72 display: none;
73 }`}
74`;
75 addStyle(css);
76}
77/**
78 * 插入导航栏相关的样式
79*/
80function loadNavigationBarStyle() {
81 const css = `
82 .taro-navigation-bar-show {
83 display: flex;
84 background: white;
85 position: sticky;
86 z-index: 500;
87 top: 0;
88 padding-bottom: 8px;
89 padding-top: calc(env(safe-area-inset-top) + 8px);
90 justify-content: center;
91 align-items: center;
92 }
93
94 .taro-navigation-bar-hide {
95 display: none;
96 }
97
98 .taro-navigation-bar-title-wrap {
99 display: flex;
100 height: 24px;
101 }
102
103 .taro-navigation-bar-title-wrap > .taro-navigation-bar-loading {
104 display: none;
105 animation: loading 2s linear infinite;
106 }
107
108 .taro-navigation-bar-title-wrap .taro-navigation-bar-loading.taro-navigation-bar-loading-show {
109 display: flex;
110 }
111
112 .taro-navigation-bar-title-wrap > .taro-navigation-bar-title {
113 font-size: 24px;
114 height: 24px;
115 line-height: 24px;
116 max-width: 100px;
117 white-space: nowrap;
118 overflow: hidden;
119 line-height: 24px;
120 text-overflow: ellipsis;
121 }
122
123 @keyframes loading {
124 from {
125 transform: rotate(0deg);
126 }
127 to {
128 transform: rotate(360deg);
129 }
130 }
131
132 @keyframes loading {
133 from {
134 transform: rotate(0deg);
135 }
136 to {
137 transform: rotate(360deg);
138 }
139 }
140
141 .taro-navigation-bar-no-icon > .taro-navigation-bar-home {
142 display: none;
143 }
144
145 .taro-navigation-bar-no-icon > .taro-navigation-bar-back {
146 display: none;
147 }
148
149 .taro-navigation-bar-home-icon > .taro-navigation-bar-home {
150 display: flex;
151 left: 8px;
152 position: absolute;
153 width: 24px;
154 height: 24px;
155 }
156
157 .taro-navigation-bar-back-icon > .taro-navigation-bar-back {
158 display: flex;
159 left: 8px;
160 position: absolute;
161 width: 24px;
162 height: 24px;
163 }
164`;
165 addStyle(css);
166}
167function addStyle(css) {
168 if (!css)
169 return;
170 const style = document.createElement('style');
171 style.innerHTML = css;
172 document.getElementsByTagName('head')[0].appendChild(style);
173}
174
175export { addStyle, loadAnimateStyle, loadNavigationBarStyle, loadRouterStyle };