@tarojs/router 3.6.24 → 3.6.26-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/api.js +8 -3
  2. package/dist/history.js +2 -1
  3. package/dist/index.cjs.d.ts +2 -1
  4. package/dist/index.cjs.js +113 -13
  5. package/dist/index.esm.d.ts +2 -1
  6. package/dist/index.esm.js +113 -14
  7. package/dist/index.js +1 -1
  8. package/dist/navigationBar.js +11 -1
  9. package/dist/router/index.js +2 -2
  10. package/dist/router/mpa.js +1 -1
  11. package/dist/router/navigation-bar.d.ts +5 -1
  12. package/dist/router/navigation-bar.js +45 -1
  13. package/dist/style.js +41 -4
  14. package/dist/utils/navigate.d.ts +2 -1
  15. package/dist/utils/navigate.js +5 -2
  16. package/package.json +7 -5
  17. package/types/api.d.ts +5 -0
package/dist/api.js CHANGED
@@ -1,11 +1,13 @@
1
1
  import { __awaiter } from 'tslib';
2
2
  import { addLeadingSlash } from '@tarojs/runtime';
3
+ import { EventChannel } from '@tarojs/shared';
3
4
  import { parsePath } from 'history';
4
5
  import { history, prependBasename } from './history.js';
5
6
  import { RouterConfig } from './router/index.js';
6
7
  import stacks from './router/stack.js';
7
8
  import { routesAlias } from './utils/index.js';
8
9
 
10
+ const routeEvtChannel = EventChannel.routeChannel;
9
11
  function processNavigateUrl(option) {
10
12
  var _a;
11
13
  const pathPieces = parsePath(option.url);
@@ -37,6 +39,10 @@ function navigate(option, method) {
37
39
  const { success, complete, fail } = option;
38
40
  const unListen = history.listen(() => {
39
41
  const res = { errMsg: `${method}:ok` };
42
+ if (method === 'navigateTo') {
43
+ res.eventChannel = routeEvtChannel;
44
+ routeEvtChannel.addEvents(option.events);
45
+ }
40
46
  success === null || success === void 0 ? void 0 : success(res);
41
47
  complete === null || complete === void 0 ? void 0 : complete(res);
42
48
  resolve(res);
@@ -48,9 +54,8 @@ function navigate(option, method) {
48
54
  const state = { timestamp: Date.now() };
49
55
  if (pathPieces.pathname) {
50
56
  const originPath = routesAlias.getOrigin(pathPieces.pathname);
51
- const pagePath = originPath.startsWith('/') ? originPath.substring(1) : originPath;
52
- if (!RouterConfig.pages.includes(pagePath)) {
53
- const res = { errMsg: `${method}:fail page ${pagePath} is not found` };
57
+ if (!RouterConfig.isPage(addLeadingSlash(originPath))) {
58
+ const res = { errMsg: `${method}:fail page ${originPath} is not found` };
54
59
  fail === null || fail === void 0 ? void 0 : fail(res);
55
60
  complete === null || complete === void 0 ? void 0 : complete(res);
56
61
  if (fail || complete) {
package/dist/history.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { addLeadingSlash } from '@tarojs/runtime';
1
2
  import { createBrowserHistory, createHashHistory, Action } from 'history';
2
3
  export { createBrowserHistory, createHashHistory } from 'history';
3
4
  import { RouterConfig } from './router/index.js';
@@ -25,7 +26,7 @@ class MpaHistory {
25
26
  }
26
27
  parseUrl(to) {
27
28
  let url = to.pathname || '';
28
- if (RouterConfig.isPage(url)) {
29
+ if (RouterConfig.isPage(addLeadingSlash(url))) {
29
30
  url += '.html';
30
31
  }
31
32
  if (to.search) {
package/dist/index.cjs.d.ts CHANGED
@@ -60,6 +60,7 @@ declare function setNavigationBarStyle(option: {
60
60
  backgroundColor: string;
61
61
  frontColor: string;
62
62
  }): void;
63
+ declare function setNavigationBarLoading(loading: boolean): void;
63
64
  declare function handleAppMount(config: SpaRouterConfig | MpaRouterConfig, _: History, appId?: string): void;
64
65
  declare function handleAppMountWithTabbar(config: SpaRouterConfig | MpaRouterConfig, history: History, appId?: string): void;
65
- export { navigateTo, redirectTo, navigateBack, switchTab, reLaunch, getCurrentPages, history, setHistory, createMpaHistory, createBrowserHistory, createHashHistory, setHistoryMode, prependBasename, createMultiRouter, createRouter, routesAlias, isWeixin, isDingTalk, setMpaTitle, setTitle, setNavigationBarStyle, handleAppMount, handleAppMountWithTabbar };
66
+ export { navigateTo, redirectTo, navigateBack, switchTab, reLaunch, getCurrentPages, history, setHistory, createMpaHistory, createBrowserHistory, createHashHistory, setHistoryMode, prependBasename, createMultiRouter, createRouter, routesAlias, isWeixin, isDingTalk, setMpaTitle, setTitle, setNavigationBarStyle, setNavigationBarLoading, handleAppMount, handleAppMountWithTabbar };
package/dist/index.cjs.js CHANGED
@@ -4,6 +4,7 @@ var components = require('@tarojs/components/dist/components');
4
4
  var taro = require('@tarojs/taro');
5
5
  var tslib = require('tslib');
6
6
  var runtime = require('@tarojs/runtime');
7
+ var shared = require('@tarojs/shared');
7
8
  var history = require('history');
8
9
  var queryString = require('query-string');
9
10
  var UniversalRouter = require('universal-router');
@@ -83,13 +84,13 @@ ${enableTabBar ? `
83
84
  function loadNavigationBarStyle() {
84
85
  const css = `
85
86
  .taro-navigation-bar-show {
87
+ display: flex;
86
88
  background: white;
87
89
  position: sticky;
88
90
  z-index: 500;
89
91
  top: 0;
90
92
  padding-bottom: 8px;
91
93
  padding-top: calc(env(safe-area-inset-top) + 8px);
92
- display: flex;
93
94
  justify-content: center;
94
95
  align-items: center;
95
96
  }
@@ -98,12 +99,49 @@ function loadNavigationBarStyle() {
98
99
  display: none;
99
100
  }
100
101
 
101
- .taro-navigation-bar-title {
102
+ .taro-navigation-bar-title-wrap {
103
+ display: flex;
104
+ height: 24px;
105
+ }
106
+
107
+ .taro-navigation-bar-title-wrap > .taro-navigation-bar-loading {
108
+ display: none;
109
+ animation: loading 2s linear infinite;
110
+ }
111
+
112
+ .taro-navigation-bar-title-wrap .taro-navigation-bar-loading.taro-navigation-bar-loading-show {
113
+ display: flex;
114
+ }
115
+
116
+ .taro-navigation-bar-title-wrap > .taro-navigation-bar-title {
102
117
  font-size: 24px;
103
118
  height: 24px;
104
119
  line-height: 24px;
120
+ max-width: 100px;
121
+ white-space: nowrap;
122
+ overflow: hidden;
123
+ line-height: 24px;
124
+ text-overflow: ellipsis;
125
+ }
126
+
127
+ @keyframes loading {
128
+ from {
129
+ transform: rotate(0deg);
130
+ }
131
+ to {
132
+ transform: rotate(360deg);
133
+ }
105
134
  }
106
135
 
136
+ @keyframes loading {
137
+ from {
138
+ transform: rotate(0deg);
139
+ }
140
+ to {
141
+ transform: rotate(360deg);
142
+ }
143
+ }
144
+
107
145
  .taro-navigation-bar-no-icon > .taro-navigation-bar-home {
108
146
  display: none;
109
147
  }
@@ -113,7 +151,7 @@ function loadNavigationBarStyle() {
113
151
  }
114
152
 
115
153
  .taro-navigation-bar-home-icon > .taro-navigation-bar-home {
116
- display: block;
154
+ display: flex;
117
155
  left: 8px;
118
156
  position: absolute;
119
157
  width: 24px;
@@ -121,7 +159,7 @@ function loadNavigationBarStyle() {
121
159
  }
122
160
 
123
161
  .taro-navigation-bar-back-icon > .taro-navigation-bar-back {
124
- display: block;
162
+ display: flex;
125
163
  left: 8px;
126
164
  position: absolute;
127
165
  width: 24px;
@@ -148,6 +186,9 @@ const back_svg_str = `
148
186
  <path d="M17.8206 22.9016L7.45515 11.8756L17.8206 1.09845C18.0598 0.849741 18.0598 0.435233 17.8206 0.186528C17.5814 -0.0621762 17.1827 -0.0621762 16.9435 0.186528L6.1794 11.4611C5.9402 11.7098 5.9402 12.1244 6.1794 12.3731L16.9435 23.8135C17.1827 24.0622 17.5814 24.0622 17.8206 23.8135C18.0598 23.5648 18.0598 23.1503 17.8206 22.9016Z" fill="currentColor"/>
149
187
  </svg>
150
188
  `;
189
+ const loading_svg_str = `
190
+ <svg t="1709608074670" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4741" width="24" height="24"><path d="M256 529.066667H85.333333a17.066667 17.066667 0 1 1 0-34.133334h170.666667a17.066667 17.066667 0 0 1 0 34.133334z" opacity=".278" p-id="4742"></path><path d="M99.84 640a17.066667 17.066667 0 0 1-4.437333-33.553067l164.693333-44.373333a17.066667 17.066667 0 1 1 8.891733 32.9728l-164.693333 44.373333a17.544533 17.544533 0 0 1-4.4544 0.580267z" opacity=".322" p-id="4743"></path><path d="M264.533333 462.523733a16.896 16.896 0 0 1-4.369066-0.580266l-164.693334-43.52a17.0496 17.0496 0 1 1 8.721067-32.989867l164.693333 43.52a17.066667 17.066667 0 1 1-4.352 33.570133z" opacity=".239" p-id="4744"></path><path d="M384.017067 307.2a17.032533 17.032533 0 0 1-14.7968-8.533333l-85.333334-147.626667a17.066667 17.066667 0 0 1 29.559467-17.083733l85.333333 147.626666A17.066667 17.066667 0 0 1 384.017067 307.2z" opacity=".122" p-id="4745"></path><path d="M639.982933 307.2a17.0496 17.0496 0 0 1-14.762666-25.6l85.333333-147.626667a17.066667 17.066667 0 1 1 29.559467 17.066667l-85.333334 147.626667a17.032533 17.032533 0 0 1-14.7968 8.533333z" opacity=".922" p-id="4746"></path><path d="M692.906667 347.306667a17.066667 17.066667 0 0 1-12.117334-29.098667l120.337067-121.173333a17.066667 17.066667 0 1 1 24.234667 24.046933l-120.337067 121.173333a17.1008 17.1008 0 0 1-12.117333 5.051734z" opacity=".878" p-id="4747"></path><path d="M733.883733 401.066667a17.066667 17.066667 0 0 1-8.5504-31.8464l147.626667-85.333334a17.0496 17.0496 0 1 1 17.066667 29.5424l-147.626667 85.333334a16.776533 16.776533 0 0 1-8.516267 2.304z" opacity=".839" p-id="4748"></path><path d="M512 273.066667a17.066667 17.066667 0 0 1-17.066667-17.066667V85.333333a17.066667 17.066667 0 0 1 34.133334 0v170.666667a17.066667 17.066667 0 0 1-17.066667 17.066667z" p-id="4749"></path><path d="M578.577067 281.6a17.066667 17.066667 0 0 1-16.520534-21.418667l43.52-164.693333a17.066667 17.066667 0 0 1 33.006934 8.721067l-43.52 164.693333a17.066667 17.066667 0 0 1-16.4864 12.6976z" opacity=".961" p-id="4750"></path><path d="M445.44 282.453333a17.066667 17.066667 0 0 1-16.469333-12.629333l-44.373334-164.693333a17.066667 17.066667 0 0 1 32.955734-8.891734l44.373333 164.693334a17.066667 17.066667 0 0 1-16.4864 21.521066z" opacity=".078" p-id="4751"></path><path d="M924.177067 640c-1.4848 0-2.9696-0.187733-4.4544-0.580267l-164.693334-44.373333a17.066667 17.066667 0 0 1 8.874667-32.9728l164.693333 44.373333a17.066667 17.066667 0 0 1-4.420266 33.553067z" opacity=".722" p-id="4752"></path><path d="M881.476267 742.4a17.015467 17.015467 0 0 1-8.482134-2.269867l-148.48-85.333333a17.0496 17.0496 0 1 1 16.9984-29.5936l148.48 85.333333a17.0496 17.0496 0 0 1-8.516266 31.863467z" opacity=".678" p-id="4753"></path><path d="M813.226667 830.293333a17.015467 17.015467 0 0 1-12.066134-5.000533l-120.337066-120.337067a17.0496 17.0496 0 1 1 24.132266-24.132266l120.337067 120.337066a17.0496 17.0496 0 0 1-12.066133 29.1328z" opacity=".639" p-id="4754"></path><path d="M938.666667 529.066667H768a17.066667 17.066667 0 1 1 0-34.133334h170.666667a17.066667 17.066667 0 1 1 0 34.133334z" opacity=".761" p-id="4755"></path><path d="M401.066667 941.226667a17.066667 17.066667 0 0 1-16.4864-21.504l44.373333-164.693334a17.066667 17.066667 0 1 1 32.955733 8.874667l-44.373333 164.693333a17.066667 17.066667 0 0 1-16.469333 12.629334z" opacity=".478" p-id="4756"></path><path d="M298.6496 898.56a17.066667 17.066667 0 0 1-14.779733-25.565867l85.333333-148.48a17.083733 17.083733 0 0 1 29.5936 16.9984l-85.333333 148.48a17.032533 17.032533 0 0 1-14.813867 8.567467z" opacity=".439" p-id="4757"></path><path d="M512 955.733333a17.066667 17.066667 0 0 1-17.066667-17.066666V768a17.066667 17.066667 0 1 1 34.133334 0v170.666667a17.066667 17.066667 0 0 1-17.066667 17.066666z" opacity=".522" p-id="4758"></path><path d="M725.3504 898.56a17.032533 17.032533 0 0 1-14.7968-8.533333l-85.333333-147.626667a17.066667 17.066667 0 0 1 29.559466-17.066667l85.333334 147.626667a17.066667 17.066667 0 0 1-14.762667 25.6z" opacity=".6" p-id="4759"></path><path d="M622.062933 942.08c-7.509333 0-14.421333-5.0176-16.469333-12.629333l-44.3904-164.693334a17.066667 17.066667 0 1 1 32.9728-8.874666l44.3904 164.693333a17.066667 17.066667 0 0 1-16.503467 21.504z" opacity=".561" p-id="4760"></path><path d="M759.4496 463.36a17.083733 17.083733 0 0 1-4.420267-33.553067l164.693334-44.373333a17.066667 17.066667 0 0 1 8.874666 32.955733l-164.693333 44.373334a16.657067 16.657067 0 0 1-4.4544 0.597333z" opacity=".702" p-id="4761"></path><path d="M330.24 347.306667a17.015467 17.015467 0 0 1-12.066133-5.000534l-120.32-120.32a17.0496 17.0496 0 1 1 24.132266-24.132266l120.32 120.32a17.0496 17.0496 0 0 1-12.066133 29.1328z" opacity=".161" p-id="4762"></path><path d="M290.116267 401.066667a17.032533 17.032533 0 0 1-8.533334-2.286934l-147.626666-85.333333a17.066667 17.066667 0 1 1 17.083733-29.5424l147.626667 85.333333a17.066667 17.066667 0 0 1-8.5504 31.829334z" opacity=".2" p-id="4763"></path><path d="M142.523733 742.4a17.066667 17.066667 0 0 1-8.567466-31.8464l147.626666-85.333333a17.066667 17.066667 0 1 1 17.083734 29.559466l-147.626667 85.333334a16.930133 16.930133 0 0 1-8.516267 2.286933z" opacity=".361" p-id="4764"></path><path d="M209.92 830.293333a17.066667 17.066667 0 0 1-12.117333-29.098666l120.32-121.173334a17.066667 17.066667 0 0 1 24.2176 24.029867l-120.32 121.1904a16.896 16.896 0 0 1-12.100267 5.051733z" opacity=".4" p-id="4765"></path></svg>
191
+ `;
151
192
  function initNavigationBar(config, container) {
152
193
  if (config.router.mode === 'multi')
153
194
  return;
@@ -159,11 +200,18 @@ function initNavigationBar(config, container) {
159
200
  navigationBarHomeBtn.classList.add('taro-navigation-bar-home');
160
201
  navigationBarBackBtn.innerHTML = back_svg_str;
161
202
  navigationBarHomeBtn.innerHTML = home_svg_str;
203
+ const navigationBarTitleWrap = document.createElement('div');
204
+ navigationBarTitleWrap.classList.add('taro-navigation-bar-title-wrap');
205
+ const navigationBarLoading = document.createElement('div');
206
+ navigationBarLoading.classList.add('taro-navigation-bar-loading');
207
+ navigationBarLoading.innerHTML = loading_svg_str;
162
208
  const navigationBarTitle = document.createElement('div');
163
209
  navigationBarTitle.classList.add('taro-navigation-bar-title');
210
+ navigationBarTitleWrap.appendChild(navigationBarLoading);
211
+ navigationBarTitleWrap.appendChild(navigationBarTitle);
164
212
  navigationBar.appendChild(navigationBarHomeBtn);
165
213
  navigationBar.appendChild(navigationBarBackBtn);
166
- navigationBar.appendChild(navigationBarTitle);
214
+ navigationBar.appendChild(navigationBarTitleWrap);
167
215
  navigationBar.id = 'taro-navigation-bar';
168
216
  container.prepend(navigationBar);
169
217
  loadNavigationBarStyle();
@@ -215,7 +263,7 @@ class RouterConfig {
215
263
  }
216
264
  static get customRoutes() { return this.router.customRoutes || {}; }
217
265
  static isPage(url = '') {
218
- return this.pages.findIndex(e => runtime.addLeadingSlash(e) === url) !== -1;
266
+ return this.pages.findIndex(e => prependBasename(e) === url) !== -1;
219
267
  }
220
268
  }
221
269
 
@@ -242,7 +290,7 @@ class MpaHistory {
242
290
  }
243
291
  parseUrl(to) {
244
292
  let url = to.pathname || '';
245
- if (RouterConfig.isPage(url)) {
293
+ if (RouterConfig.isPage(runtime.addLeadingSlash(url))) {
246
294
  url += '.html';
247
295
  }
248
296
  if (to.search) {
@@ -425,11 +473,14 @@ function setMpaTitle(title) {
425
473
  }
426
474
  }
427
475
  function setTitle(title) {
428
- runtime.eventCenter.trigger('__taroH5SetNavigationTitle', title);
476
+ runtime.eventCenter.trigger('__taroH5SetNavigationBarTitle', title);
429
477
  }
430
478
  function setNavigationBarStyle(option) {
431
479
  runtime.eventCenter.trigger('__taroH5setNavigationBarColor', option);
432
480
  }
481
+ function setNavigationBarLoading(loading) {
482
+ runtime.eventCenter.trigger('__taroH5setNavigationBarLoading', loading);
483
+ }
433
484
 
434
485
  class RoutesAlias {
435
486
  constructor() {
@@ -472,6 +523,7 @@ class RoutesAlias {
472
523
  }
473
524
  const routesAlias = new RoutesAlias();
474
525
 
526
+ const routeEvtChannel = shared.EventChannel.routeChannel;
475
527
  function processNavigateUrl(option) {
476
528
  var _a;
477
529
  const pathPieces = history.parsePath(option.url);
@@ -503,6 +555,10 @@ function navigate(option, method) {
503
555
  const { success, complete, fail } = option;
504
556
  const unListen = exports.history.listen(() => {
505
557
  const res = { errMsg: `${method}:ok` };
558
+ if (method === 'navigateTo') {
559
+ res.eventChannel = routeEvtChannel;
560
+ routeEvtChannel.addEvents(option.events);
561
+ }
506
562
  success === null || success === void 0 ? void 0 : success(res);
507
563
  complete === null || complete === void 0 ? void 0 : complete(res);
508
564
  resolve(res);
@@ -514,9 +570,8 @@ function navigate(option, method) {
514
570
  const state = { timestamp: Date.now() };
515
571
  if (pathPieces.pathname) {
516
572
  const originPath = routesAlias.getOrigin(pathPieces.pathname);
517
- const pagePath = originPath.startsWith('/') ? originPath.substring(1) : originPath;
518
- if (!RouterConfig.pages.includes(pagePath)) {
519
- const res = { errMsg: `${method}:fail page ${pagePath} is not found` };
573
+ if (!RouterConfig.isPage(runtime.addLeadingSlash(originPath))) {
574
+ const res = { errMsg: `${method}:fail page ${originPath} is not found` };
520
575
  fail === null || fail === void 0 ? void 0 : fail(res);
521
576
  complete === null || complete === void 0 ? void 0 : complete(res);
522
577
  if (fail || complete) {
@@ -788,7 +843,7 @@ function createMultiRouter(history, app, config, framework) {
788
843
  if (typeof app.onUnhandledRejection === 'function') {
789
844
  window.addEventListener('unhandledrejection', app.onUnhandledRejection);
790
845
  }
791
- runtime.eventCenter.on('__taroH5SetNavigationTitle', setMpaTitle);
846
+ runtime.eventCenter.on('__taroH5SetNavigationBarTitle', setMpaTitle);
792
847
  RouterConfig.config = config;
793
848
  const handler = new MultiPageHandler(config, history);
794
849
  const launchParam = {
@@ -857,9 +912,12 @@ class NavigationBarHandler {
857
912
  this.cache = {};
858
913
  this.pageContext = pageContext;
859
914
  this.init();
860
- runtime.eventCenter.on('__taroH5SetNavigationTitle', (title) => {
915
+ runtime.eventCenter.on('__taroH5SetNavigationBarTitle', (title) => {
861
916
  this.setTitle(title);
862
917
  });
918
+ runtime.eventCenter.on('__taroH5setNavigationBarLoading', (loading) => {
919
+ this.setNavigationLoading(loading);
920
+ });
863
921
  runtime.eventCenter.on('__taroH5setNavigationBarColor', ({ backgroundColor, frontColor }) => {
864
922
  if (typeof backgroundColor === 'string')
865
923
  this.setNavigationBarBackground(backgroundColor);
@@ -891,6 +949,11 @@ class NavigationBarHandler {
891
949
  return null;
892
950
  return (_a = this.navigationBarElement.getElementsByClassName('taro-navigation-bar-title')) === null || _a === void 0 ? void 0 : _a[0];
893
951
  }
952
+ get loadingElement() {
953
+ if (!this.navigationBarElement)
954
+ return null;
955
+ return this.navigationBarElement.getElementsByClassName('taro-navigation-bar-loading')[0];
956
+ }
894
957
  init() {
895
958
  var _a, _b;
896
959
  this.setNavigationBarElement();
@@ -909,6 +972,7 @@ class NavigationBarHandler {
909
972
  this.setFnBtnState();
910
973
  this.setNavigationBarBackground();
911
974
  this.setNavigationBarTextStyle();
975
+ this.setNavigationLoading();
912
976
  }
913
977
  setCacheValue() {
914
978
  const currentPage = this.pageContext.currentPage;
@@ -928,6 +992,41 @@ class NavigationBarHandler {
928
992
  this.fnBtnToggleToHome();
929
993
  }
930
994
  }
995
+ shiftLoadingState(show) {
996
+ if (!this.loadingElement)
997
+ return;
998
+ if (show) {
999
+ this.loadingElement.classList.add('taro-navigation-bar-loading-show');
1000
+ }
1001
+ else {
1002
+ this.loadingElement.classList.remove('taro-navigation-bar-loading-show');
1003
+ }
1004
+ }
1005
+ setNavigationLoading(show) {
1006
+ var _a;
1007
+ if (!this.navigationBarElement)
1008
+ return;
1009
+ const currentPage = this.pageContext.currentPage;
1010
+ let isShow;
1011
+ if (typeof show === 'boolean') {
1012
+ isShow = show;
1013
+ this.cache[currentPage] &&
1014
+ (this.cache[currentPage].loading = isShow);
1015
+ }
1016
+ else {
1017
+ const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.loading;
1018
+ if (typeof cacheValue === 'boolean') {
1019
+ isShow = cacheValue;
1020
+ }
1021
+ else {
1022
+ // 默认值为 false
1023
+ isShow = false;
1024
+ this.cache[currentPage] &&
1025
+ (this.cache[currentPage].loading = isShow);
1026
+ }
1027
+ }
1028
+ this.shiftLoadingState(isShow);
1029
+ }
931
1030
  setNavigationBarBackground(backgroundColor) {
932
1031
  var _a, _b, _c;
933
1032
  if (!this.navigationBarElement)
@@ -1635,6 +1734,7 @@ exports.routesAlias = routesAlias;
1635
1734
  exports.setHistory = setHistory;
1636
1735
  exports.setHistoryMode = setHistoryMode;
1637
1736
  exports.setMpaTitle = setMpaTitle;
1737
+ exports.setNavigationBarLoading = setNavigationBarLoading;
1638
1738
  exports.setNavigationBarStyle = setNavigationBarStyle;
1639
1739
  exports.setTitle = setTitle;
1640
1740
  exports.switchTab = switchTab;
package/dist/index.esm.d.ts CHANGED
@@ -60,6 +60,7 @@ declare function setNavigationBarStyle(option: {
60
60
  backgroundColor: string;
61
61
  frontColor: string;
62
62
  }): void;
63
+ declare function setNavigationBarLoading(loading: boolean): void;
63
64
  declare function handleAppMount(config: SpaRouterConfig | MpaRouterConfig, _: History, appId?: string): void;
64
65
  declare function handleAppMountWithTabbar(config: SpaRouterConfig | MpaRouterConfig, history: History, appId?: string): void;
65
- export { navigateTo, redirectTo, navigateBack, switchTab, reLaunch, getCurrentPages, history, setHistory, createMpaHistory, createBrowserHistory, createHashHistory, setHistoryMode, prependBasename, createMultiRouter, createRouter, routesAlias, isWeixin, isDingTalk, setMpaTitle, setTitle, setNavigationBarStyle, handleAppMount, handleAppMountWithTabbar };
66
+ export { navigateTo, redirectTo, navigateBack, switchTab, reLaunch, getCurrentPages, history, setHistory, createMpaHistory, createBrowserHistory, createHashHistory, setHistoryMode, prependBasename, createMultiRouter, createRouter, routesAlias, isWeixin, isDingTalk, setMpaTitle, setTitle, setNavigationBarStyle, setNavigationBarLoading, handleAppMount, handleAppMountWithTabbar };
package/dist/index.esm.js CHANGED
@@ -2,6 +2,7 @@ import { defineCustomElementTaroTabbar } from '@tarojs/components/dist/component
2
2
  import { initTabBarApis } from '@tarojs/taro';
3
3
  import { __awaiter } from 'tslib';
4
4
  import { addLeadingSlash, eventCenter, Current, stripBasename, incrementId, createPageConfig, hooks, stringify, getHomePage, getCurrentPage, stripTrailing, requestAnimationFrame as requestAnimationFrame$1, safeExecute } from '@tarojs/runtime';
5
+ import { EventChannel } from '@tarojs/shared';
5
6
  import { createBrowserHistory, createHashHistory, Action, parsePath } from 'history';
6
7
  export { createBrowserHistory, createHashHistory } from 'history';
7
8
  import queryString from 'query-string';
@@ -82,13 +83,13 @@ ${enableTabBar ? `
82
83
  function loadNavigationBarStyle() {
83
84
  const css = `
84
85
  .taro-navigation-bar-show {
86
+ display: flex;
85
87
  background: white;
86
88
  position: sticky;
87
89
  z-index: 500;
88
90
  top: 0;
89
91
  padding-bottom: 8px;
90
92
  padding-top: calc(env(safe-area-inset-top) + 8px);
91
- display: flex;
92
93
  justify-content: center;
93
94
  align-items: center;
94
95
  }
@@ -97,12 +98,49 @@ function loadNavigationBarStyle() {
97
98
  display: none;
98
99
  }
99
100
 
100
- .taro-navigation-bar-title {
101
+ .taro-navigation-bar-title-wrap {
102
+ display: flex;
103
+ height: 24px;
104
+ }
105
+
106
+ .taro-navigation-bar-title-wrap > .taro-navigation-bar-loading {
107
+ display: none;
108
+ animation: loading 2s linear infinite;
109
+ }
110
+
111
+ .taro-navigation-bar-title-wrap .taro-navigation-bar-loading.taro-navigation-bar-loading-show {
112
+ display: flex;
113
+ }
114
+
115
+ .taro-navigation-bar-title-wrap > .taro-navigation-bar-title {
101
116
  font-size: 24px;
102
117
  height: 24px;
103
118
  line-height: 24px;
119
+ max-width: 100px;
120
+ white-space: nowrap;
121
+ overflow: hidden;
122
+ line-height: 24px;
123
+ text-overflow: ellipsis;
124
+ }
125
+
126
+ @keyframes loading {
127
+ from {
128
+ transform: rotate(0deg);
129
+ }
130
+ to {
131
+ transform: rotate(360deg);
132
+ }
104
133
  }
105
134
 
135
+ @keyframes loading {
136
+ from {
137
+ transform: rotate(0deg);
138
+ }
139
+ to {
140
+ transform: rotate(360deg);
141
+ }
142
+ }
143
+
106
144
  .taro-navigation-bar-no-icon > .taro-navigation-bar-home {
107
145
  display: none;
108
146
  }
@@ -112,7 +150,7 @@ function loadNavigationBarStyle() {
112
150
  }
113
151
 
114
152
  .taro-navigation-bar-home-icon > .taro-navigation-bar-home {
115
- display: block;
153
+ display: flex;
116
154
  left: 8px;
117
155
  position: absolute;
118
156
  width: 24px;
@@ -120,7 +158,7 @@ function loadNavigationBarStyle() {
120
158
  }
121
159
 
122
160
  .taro-navigation-bar-back-icon > .taro-navigation-bar-back {
123
- display: block;
161
+ display: flex;
124
162
  left: 8px;
125
163
  position: absolute;
126
164
  width: 24px;
@@ -147,6 +185,9 @@ const back_svg_str = `
147
185
  <path d="M17.8206 22.9016L7.45515 11.8756L17.8206 1.09845C18.0598 0.849741 18.0598 0.435233 17.8206 0.186528C17.5814 -0.0621762 17.1827 -0.0621762 16.9435 0.186528L6.1794 11.4611C5.9402 11.7098 5.9402 12.1244 6.1794 12.3731L16.9435 23.8135C17.1827 24.0622 17.5814 24.0622 17.8206 23.8135C18.0598 23.5648 18.0598 23.1503 17.8206 22.9016Z" fill="currentColor"/>
148
186
  </svg>
149
187
  `;
188
+ const loading_svg_str = `
189
+ <svg t="1709608074670" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4741" width="24" height="24"><path d="M256 529.066667H85.333333a17.066667 17.066667 0 1 1 0-34.133334h170.666667a17.066667 17.066667 0 0 1 0 34.133334z" opacity=".278" p-id="4742"></path><path d="M99.84 640a17.066667 17.066667 0 0 1-4.437333-33.553067l164.693333-44.373333a17.066667 17.066667 0 1 1 8.891733 32.9728l-164.693333 44.373333a17.544533 17.544533 0 0 1-4.4544 0.580267z" opacity=".322" p-id="4743"></path><path d="M264.533333 462.523733a16.896 16.896 0 0 1-4.369066-0.580266l-164.693334-43.52a17.0496 17.0496 0 1 1 8.721067-32.989867l164.693333 43.52a17.066667 17.066667 0 1 1-4.352 33.570133z" opacity=".239" p-id="4744"></path><path d="M384.017067 307.2a17.032533 17.032533 0 0 1-14.7968-8.533333l-85.333334-147.626667a17.066667 17.066667 0 0 1 29.559467-17.083733l85.333333 147.626666A17.066667 17.066667 0 0 1 384.017067 307.2z" opacity=".122" p-id="4745"></path><path d="M639.982933 307.2a17.0496 17.0496 0 0 1-14.762666-25.6l85.333333-147.626667a17.066667 17.066667 0 1 1 29.559467 17.066667l-85.333334 147.626667a17.032533 17.032533 0 0 1-14.7968 8.533333z" opacity=".922" p-id="4746"></path><path d="M692.906667 347.306667a17.066667 17.066667 0 0 1-12.117334-29.098667l120.337067-121.173333a17.066667 17.066667 0 1 1 24.234667 24.046933l-120.337067 121.173333a17.1008 17.1008 0 0 1-12.117333 5.051734z" opacity=".878" p-id="4747"></path><path d="M733.883733 401.066667a17.066667 17.066667 0 0 1-8.5504-31.8464l147.626667-85.333334a17.0496 17.0496 0 1 1 17.066667 29.5424l-147.626667 85.333334a16.776533 16.776533 0 0 1-8.516267 2.304z" opacity=".839" p-id="4748"></path><path d="M512 273.066667a17.066667 17.066667 0 0 1-17.066667-17.066667V85.333333a17.066667 17.066667 0 0 1 34.133334 0v170.666667a17.066667 17.066667 0 0 1-17.066667 17.066667z" p-id="4749"></path><path d="M578.577067 281.6a17.066667 17.066667 0 0 1-16.520534-21.418667l43.52-164.693333a17.066667 17.066667 0 0 1 33.006934 8.721067l-43.52 164.693333a17.066667 17.066667 0 0 1-16.4864 12.6976z" opacity=".961" p-id="4750"></path><path d="M445.44 282.453333a17.066667 17.066667 0 0 1-16.469333-12.629333l-44.373334-164.693333a17.066667 17.066667 0 0 1 32.955734-8.891734l44.373333 164.693334a17.066667 17.066667 0 0 1-16.4864 21.521066z" opacity=".078" p-id="4751"></path><path d="M924.177067 640c-1.4848 0-2.9696-0.187733-4.4544-0.580267l-164.693334-44.373333a17.066667 17.066667 0 0 1 8.874667-32.9728l164.693333 44.373333a17.066667 17.066667 0 0 1-4.420266 33.553067z" opacity=".722" p-id="4752"></path><path d="M881.476267 742.4a17.015467 17.015467 0 0 1-8.482134-2.269867l-148.48-85.333333a17.0496 17.0496 0 1 1 16.9984-29.5936l148.48 85.333333a17.0496 17.0496 0 0 1-8.516266 31.863467z" opacity=".678" p-id="4753"></path><path d="M813.226667 830.293333a17.015467 17.015467 0 0 1-12.066134-5.000533l-120.337066-120.337067a17.0496 17.0496 0 1 1 24.132266-24.132266l120.337067 120.337066a17.0496 17.0496 0 0 1-12.066133 29.1328z" opacity=".639" p-id="4754"></path><path d="M938.666667 529.066667H768a17.066667 17.066667 0 1 1 0-34.133334h170.666667a17.066667 17.066667 0 1 1 0 34.133334z" opacity=".761" p-id="4755"></path><path d="M401.066667 941.226667a17.066667 17.066667 0 0 1-16.4864-21.504l44.373333-164.693334a17.066667 17.066667 0 1 1 32.955733 8.874667l-44.373333 164.693333a17.066667 17.066667 0 0 1-16.469333 12.629334z" opacity=".478" p-id="4756"></path><path d="M298.6496 898.56a17.066667 17.066667 0 0 1-14.779733-25.565867l85.333333-148.48a17.083733 17.083733 0 0 1 29.5936 16.9984l-85.333333 148.48a17.032533 17.032533 0 0 1-14.813867 8.567467z" opacity=".439" p-id="4757"></path><path d="M512 955.733333a17.066667 17.066667 0 0 1-17.066667-17.066666V768a17.066667 17.066667 0 1 1 34.133334 0v170.666667a17.066667 17.066667 0 0 1-17.066667 17.066666z" opacity=".522" p-id="4758"></path><path d="M725.3504 898.56a17.032533 17.032533 0 0 1-14.7968-8.533333l-85.333333-147.626667a17.066667 17.066667 0 0 1 29.559466-17.066667l85.333334 147.626667a17.066667 17.066667 0 0 1-14.762667 25.6z" opacity=".6" p-id="4759"></path><path d="M622.062933 942.08c-7.509333 0-14.421333-5.0176-16.469333-12.629333l-44.3904-164.693334a17.066667 17.066667 0 1 1 32.9728-8.874666l44.3904 164.693333a17.066667 17.066667 0 0 1-16.503467 21.504z" opacity=".561" p-id="4760"></path><path d="M759.4496 463.36a17.083733 17.083733 0 0 1-4.420267-33.553067l164.693334-44.373333a17.066667 17.066667 0 0 1 8.874666 32.955733l-164.693333 44.373334a16.657067 16.657067 0 0 1-4.4544 0.597333z" opacity=".702" p-id="4761"></path><path d="M330.24 347.306667a17.015467 17.015467 0 0 1-12.066133-5.000534l-120.32-120.32a17.0496 17.0496 0 1 1 24.132266-24.132266l120.32 120.32a17.0496 17.0496 0 0 1-12.066133 29.1328z" opacity=".161" p-id="4762"></path><path d="M290.116267 401.066667a17.032533 17.032533 0 0 1-8.533334-2.286934l-147.626666-85.333333a17.066667 17.066667 0 1 1 17.083733-29.5424l147.626667 85.333333a17.066667 17.066667 0 0 1-8.5504 31.829334z" opacity=".2" p-id="4763"></path><path d="M142.523733 742.4a17.066667 17.066667 0 0 1-8.567466-31.8464l147.626666-85.333333a17.066667 17.066667 0 1 1 17.083734 29.559466l-147.626667 85.333334a16.930133 16.930133 0 0 1-8.516267 2.286933z" opacity=".361" p-id="4764"></path><path d="M209.92 830.293333a17.066667 17.066667 0 0 1-12.117333-29.098666l120.32-121.173334a17.066667 17.066667 0 0 1 24.2176 24.029867l-120.32 121.1904a16.896 16.896 0 0 1-12.100267 5.051733z" opacity=".4" p-id="4765"></path></svg>
190
+ `;
150
191
  function initNavigationBar(config, container) {
151
192
  if (config.router.mode === 'multi')
152
193
  return;
@@ -158,11 +199,18 @@ function initNavigationBar(config, container) {
158
199
  navigationBarHomeBtn.classList.add('taro-navigation-bar-home');
159
200
  navigationBarBackBtn.innerHTML = back_svg_str;
160
201
  navigationBarHomeBtn.innerHTML = home_svg_str;
202
+ const navigationBarTitleWrap = document.createElement('div');
203
+ navigationBarTitleWrap.classList.add('taro-navigation-bar-title-wrap');
204
+ const navigationBarLoading = document.createElement('div');
205
+ navigationBarLoading.classList.add('taro-navigation-bar-loading');
206
+ navigationBarLoading.innerHTML = loading_svg_str;
161
207
  const navigationBarTitle = document.createElement('div');
162
208
  navigationBarTitle.classList.add('taro-navigation-bar-title');
209
+ navigationBarTitleWrap.appendChild(navigationBarLoading);
210
+ navigationBarTitleWrap.appendChild(navigationBarTitle);
163
211
  navigationBar.appendChild(navigationBarHomeBtn);
164
212
  navigationBar.appendChild(navigationBarBackBtn);
165
- navigationBar.appendChild(navigationBarTitle);
213
+ navigationBar.appendChild(navigationBarTitleWrap);
166
214
  navigationBar.id = 'taro-navigation-bar';
167
215
  container.prepend(navigationBar);
168
216
  loadNavigationBarStyle();
@@ -214,7 +262,7 @@ class RouterConfig {
214
262
  }
215
263
  static get customRoutes() { return this.router.customRoutes || {}; }
216
264
  static isPage(url = '') {
217
- return this.pages.findIndex(e => addLeadingSlash(e) === url) !== -1;
265
+ return this.pages.findIndex(e => prependBasename(e) === url) !== -1;
218
266
  }
219
267
  }
220
268
 
@@ -241,7 +289,7 @@ class MpaHistory {
241
289
  }
242
290
  parseUrl(to) {
243
291
  let url = to.pathname || '';
244
- if (RouterConfig.isPage(url)) {
292
+ if (RouterConfig.isPage(addLeadingSlash(url))) {
245
293
  url += '.html';
246
294
  }
247
295
  if (to.search) {
@@ -424,11 +472,14 @@ function setMpaTitle(title) {
424
472
  }
425
473
  }
426
474
  function setTitle(title) {
427
- eventCenter.trigger('__taroH5SetNavigationTitle', title);
475
+ eventCenter.trigger('__taroH5SetNavigationBarTitle', title);
428
476
  }
429
477
  function setNavigationBarStyle(option) {
430
478
  eventCenter.trigger('__taroH5setNavigationBarColor', option);
431
479
  }
480
+ function setNavigationBarLoading(loading) {
481
+ eventCenter.trigger('__taroH5setNavigationBarLoading', loading);
482
+ }
432
483
 
433
484
  class RoutesAlias {
434
485
  constructor() {
@@ -471,6 +522,7 @@ class RoutesAlias {
471
522
  }
472
523
  const routesAlias = new RoutesAlias();
473
524
 
525
+ const routeEvtChannel = EventChannel.routeChannel;
474
526
  function processNavigateUrl(option) {
475
527
  var _a;
476
528
  const pathPieces = parsePath(option.url);
@@ -502,6 +554,10 @@ function navigate(option, method) {
502
554
  const { success, complete, fail } = option;
503
555
  const unListen = history.listen(() => {
504
556
  const res = { errMsg: `${method}:ok` };
557
+ if (method === 'navigateTo') {
558
+ res.eventChannel = routeEvtChannel;
559
+ routeEvtChannel.addEvents(option.events);
560
+ }
505
561
  success === null || success === void 0 ? void 0 : success(res);
506
562
  complete === null || complete === void 0 ? void 0 : complete(res);
507
563
  resolve(res);
@@ -513,9 +569,8 @@ function navigate(option, method) {
513
569
  const state = { timestamp: Date.now() };
514
570
  if (pathPieces.pathname) {
515
571
  const originPath = routesAlias.getOrigin(pathPieces.pathname);
516
- const pagePath = originPath.startsWith('/') ? originPath.substring(1) : originPath;
517
- if (!RouterConfig.pages.includes(pagePath)) {
518
- const res = { errMsg: `${method}:fail page ${pagePath} is not found` };
572
+ if (!RouterConfig.isPage(addLeadingSlash(originPath))) {
573
+ const res = { errMsg: `${method}:fail page ${originPath} is not found` };
519
574
  fail === null || fail === void 0 ? void 0 : fail(res);
520
575
  complete === null || complete === void 0 ? void 0 : complete(res);
521
576
  if (fail || complete) {
@@ -787,7 +842,7 @@ function createMultiRouter(history, app, config, framework) {
787
842
  if (typeof app.onUnhandledRejection === 'function') {
788
843
  window.addEventListener('unhandledrejection', app.onUnhandledRejection);
789
844
  }
790
- eventCenter.on('__taroH5SetNavigationTitle', setMpaTitle);
845
+ eventCenter.on('__taroH5SetNavigationBarTitle', setMpaTitle);
791
846
  RouterConfig.config = config;
792
847
  const handler = new MultiPageHandler(config, history);
793
848
  const launchParam = {
@@ -856,9 +911,12 @@ class NavigationBarHandler {
856
911
  this.cache = {};
857
912
  this.pageContext = pageContext;
858
913
  this.init();
859
- eventCenter.on('__taroH5SetNavigationTitle', (title) => {
914
+ eventCenter.on('__taroH5SetNavigationBarTitle', (title) => {
860
915
  this.setTitle(title);
861
916
  });
917
+ eventCenter.on('__taroH5setNavigationBarLoading', (loading) => {
918
+ this.setNavigationLoading(loading);
919
+ });
862
920
  eventCenter.on('__taroH5setNavigationBarColor', ({ backgroundColor, frontColor }) => {
863
921
  if (typeof backgroundColor === 'string')
864
922
  this.setNavigationBarBackground(backgroundColor);
@@ -890,6 +948,11 @@ class NavigationBarHandler {
890
948
  return null;
891
949
  return (_a = this.navigationBarElement.getElementsByClassName('taro-navigation-bar-title')) === null || _a === void 0 ? void 0 : _a[0];
892
950
  }
951
+ get loadingElement() {
952
+ if (!this.navigationBarElement)
953
+ return null;
954
+ return this.navigationBarElement.getElementsByClassName('taro-navigation-bar-loading')[0];
955
+ }
893
956
  init() {
894
957
  var _a, _b;
895
958
  this.setNavigationBarElement();
@@ -908,6 +971,7 @@ class NavigationBarHandler {
908
971
  this.setFnBtnState();
909
972
  this.setNavigationBarBackground();
910
973
  this.setNavigationBarTextStyle();
974
+ this.setNavigationLoading();
911
975
  }
912
976
  setCacheValue() {
913
977
  const currentPage = this.pageContext.currentPage;
@@ -927,6 +991,41 @@ class NavigationBarHandler {
927
991
  this.fnBtnToggleToHome();
928
992
  }
929
993
  }
994
+ shiftLoadingState(show) {
995
+ if (!this.loadingElement)
996
+ return;
997
+ if (show) {
998
+ this.loadingElement.classList.add('taro-navigation-bar-loading-show');
999
+ }
1000
+ else {
1001
+ this.loadingElement.classList.remove('taro-navigation-bar-loading-show');
1002
+ }
1003
+ }
1004
+ setNavigationLoading(show) {
1005
+ var _a;
1006
+ if (!this.navigationBarElement)
1007
+ return;
1008
+ const currentPage = this.pageContext.currentPage;
1009
+ let isShow;
1010
+ if (typeof show === 'boolean') {
1011
+ isShow = show;
1012
+ this.cache[currentPage] &&
1013
+ (this.cache[currentPage].loading = isShow);
1014
+ }
1015
+ else {
1016
+ const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.loading;
1017
+ if (typeof cacheValue === 'boolean') {
1018
+ isShow = cacheValue;
1019
+ }
1020
+ else {
1021
+ // 默认值为 false
1022
+ isShow = false;
1023
+ this.cache[currentPage] &&
1024
+ (this.cache[currentPage].loading = isShow);
1025
+ }
1026
+ }
1027
+ this.shiftLoadingState(isShow);
1028
+ }
930
1029
  setNavigationBarBackground(backgroundColor) {
931
1030
  var _a, _b, _c;
932
1031
  if (!this.navigationBarElement)
@@ -1609,4 +1708,4 @@ function handleAppMountWithTabbar(config, history, appId = config.appId || 'app'
1609
1708
  initNavigationBar(config, container);
1610
1709
  }
1611
1710
 
1612
- export { createMpaHistory, createMultiRouter, createRouter, getCurrentPages, handleAppMount, handleAppMountWithTabbar, history, isDingTalk, isWeixin, navigateBack, navigateTo, prependBasename, reLaunch, redirectTo, routesAlias, setHistory, setHistoryMode, setMpaTitle, setNavigationBarStyle, setTitle, switchTab };
1711
+ export { createMpaHistory, createMultiRouter, createRouter, getCurrentPages, handleAppMount, handleAppMountWithTabbar, history, isDingTalk, isWeixin, navigateBack, navigateTo, prependBasename, reLaunch, redirectTo, routesAlias, setHistory, setHistoryMode, setMpaTitle, setNavigationBarLoading, setNavigationBarStyle, setTitle, switchTab };
package/dist/index.js CHANGED
@@ -6,7 +6,7 @@ export { createMultiRouter } from './router/mpa.js';
6
6
  export { createRouter } from './router/spa.js';
7
7
  export { routesAlias } from './utils/index.js';
8
8
  export { createBrowserHistory, createHashHistory } from 'history';
9
- export { isDingTalk, isWeixin, setMpaTitle, setNavigationBarStyle, setTitle } from './utils/navigate.js';
9
+ export { isDingTalk, isWeixin, setMpaTitle, setNavigationBarLoading, setNavigationBarStyle, setTitle } from './utils/navigate.js';
10
10
 
11
11
  function handleAppMount(config, _, appId = config.appId || 'app') {
12
12
  let app = document.getElementById(appId);
package/dist/navigationBar.js CHANGED
@@ -10,6 +10,9 @@ const back_svg_str = `
10
10
  <path d="M17.8206 22.9016L7.45515 11.8756L17.8206 1.09845C18.0598 0.849741 18.0598 0.435233 17.8206 0.186528C17.5814 -0.0621762 17.1827 -0.0621762 16.9435 0.186528L6.1794 11.4611C5.9402 11.7098 5.9402 12.1244 6.1794 12.3731L16.9435 23.8135C17.1827 24.0622 17.5814 24.0622 17.8206 23.8135C18.0598 23.5648 18.0598 23.1503 17.8206 22.9016Z" fill="currentColor"/>
11
11
  </svg>
12
12
  `;
13
+ const loading_svg_str = `
14
+ <svg t="1709608074670" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4741" width="24" height="24"><path d="M256 529.066667H85.333333a17.066667 17.066667 0 1 1 0-34.133334h170.666667a17.066667 17.066667 0 0 1 0 34.133334z" opacity=".278" p-id="4742"></path><path d="M99.84 640a17.066667 17.066667 0 0 1-4.437333-33.553067l164.693333-44.373333a17.066667 17.066667 0 1 1 8.891733 32.9728l-164.693333 44.373333a17.544533 17.544533 0 0 1-4.4544 0.580267z" opacity=".322" p-id="4743"></path><path d="M264.533333 462.523733a16.896 16.896 0 0 1-4.369066-0.580266l-164.693334-43.52a17.0496 17.0496 0 1 1 8.721067-32.989867l164.693333 43.52a17.066667 17.066667 0 1 1-4.352 33.570133z" opacity=".239" p-id="4744"></path><path d="M384.017067 307.2a17.032533 17.032533 0 0 1-14.7968-8.533333l-85.333334-147.626667a17.066667 17.066667 0 0 1 29.559467-17.083733l85.333333 147.626666A17.066667 17.066667 0 0 1 384.017067 307.2z" opacity=".122" p-id="4745"></path><path d="M639.982933 307.2a17.0496 17.0496 0 0 1-14.762666-25.6l85.333333-147.626667a17.066667 17.066667 0 1 1 29.559467 17.066667l-85.333334 147.626667a17.032533 17.032533 0 0 1-14.7968 8.533333z" opacity=".922" p-id="4746"></path><path d="M692.906667 347.306667a17.066667 17.066667 0 0 1-12.117334-29.098667l120.337067-121.173333a17.066667 17.066667 0 1 1 24.234667 24.046933l-120.337067 121.173333a17.1008 17.1008 0 0 1-12.117333 5.051734z" opacity=".878" p-id="4747"></path><path d="M733.883733 401.066667a17.066667 17.066667 0 0 1-8.5504-31.8464l147.626667-85.333334a17.0496 17.0496 0 1 1 17.066667 29.5424l-147.626667 85.333334a16.776533 16.776533 0 0 1-8.516267 2.304z" opacity=".839" p-id="4748"></path><path d="M512 273.066667a17.066667 17.066667 0 0 1-17.066667-17.066667V85.333333a17.066667 17.066667 0 0 1 34.133334 0v170.666667a17.066667 17.066667 0 0 1-17.066667 17.066667z" p-id="4749"></path><path d="M578.577067 281.6a17.066667 17.066667 0 0 1-16.520534-21.418667l43.52-164.693333a17.066667 17.066667 0 0 1 33.006934 8.721067l-43.52 164.693333a17.066667 17.066667 0 0 1-16.4864 12.6976z" opacity=".961" p-id="4750"></path><path d="M445.44 282.453333a17.066667 17.066667 0 0 1-16.469333-12.629333l-44.373334-164.693333a17.066667 17.066667 0 0 1 32.955734-8.891734l44.373333 164.693334a17.066667 17.066667 0 0 1-16.4864 21.521066z" opacity=".078" p-id="4751"></path><path d="M924.177067 640c-1.4848 0-2.9696-0.187733-4.4544-0.580267l-164.693334-44.373333a17.066667 17.066667 0 0 1 8.874667-32.9728l164.693333 44.373333a17.066667 17.066667 0 0 1-4.420266 33.553067z" opacity=".722" p-id="4752"></path><path d="M881.476267 742.4a17.015467 17.015467 0 0 1-8.482134-2.269867l-148.48-85.333333a17.0496 17.0496 0 1 1 16.9984-29.5936l148.48 85.333333a17.0496 17.0496 0 0 1-8.516266 31.863467z" opacity=".678" p-id="4753"></path><path d="M813.226667 830.293333a17.015467 17.015467 0 0 1-12.066134-5.000533l-120.337066-120.337067a17.0496 17.0496 0 1 1 24.132266-24.132266l120.337067 120.337066a17.0496 17.0496 0 0 1-12.066133 29.1328z" opacity=".639" p-id="4754"></path><path d="M938.666667 529.066667H768a17.066667 17.066667 0 1 1 0-34.133334h170.666667a17.066667 17.066667 0 1 1 0 34.133334z" opacity=".761" p-id="4755"></path><path d="M401.066667 941.226667a17.066667 17.066667 0 0 1-16.4864-21.504l44.373333-164.693334a17.066667 17.066667 0 1 1 32.955733 8.874667l-44.373333 164.693333a17.066667 17.066667 0 0 1-16.469333 12.629334z" opacity=".478" p-id="4756"></path><path d="M298.6496 898.56a17.066667 17.066667 0 0 1-14.779733-25.565867l85.333333-148.48a17.083733 17.083733 0 0 1 29.5936 16.9984l-85.333333 148.48a17.032533 17.032533 0 0 1-14.813867 8.567467z" opacity=".439" p-id="4757"></path><path d="M512 955.733333a17.066667 17.066667 0 0 1-17.066667-17.066666V768a17.066667 17.066667 0 1 1 34.133334 0v170.666667a17.066667 17.066667 0 0 1-17.066667 17.066666z" opacity=".522" p-id="4758"></path><path d="M725.3504 898.56a17.032533 17.032533 0 0 1-14.7968-8.533333l-85.333333-147.626667a17.066667 17.066667 0 0 1 29.559466-17.066667l85.333334 147.626667a17.066667 17.066667 0 0 1-14.762667 25.6z" opacity=".6" p-id="4759"></path><path d="M622.062933 942.08c-7.509333 0-14.421333-5.0176-16.469333-12.629333l-44.3904-164.693334a17.066667 17.066667 0 1 1 32.9728-8.874666l44.3904 164.693333a17.066667 17.066667 0 0 1-16.503467 21.504z" opacity=".561" p-id="4760"></path><path d="M759.4496 463.36a17.083733 17.083733 0 0 1-4.420267-33.553067l164.693334-44.373333a17.066667 17.066667 0 0 1 8.874666 32.955733l-164.693333 44.373334a16.657067 16.657067 0 0 1-4.4544 0.597333z" opacity=".702" p-id="4761"></path><path d="M330.24 347.306667a17.015467 17.015467 0 0 1-12.066133-5.000534l-120.32-120.32a17.0496 17.0496 0 1 1 24.132266-24.132266l120.32 120.32a17.0496 17.0496 0 0 1-12.066133 29.1328z" opacity=".161" p-id="4762"></path><path d="M290.116267 401.066667a17.032533 17.032533 0 0 1-8.533334-2.286934l-147.626666-85.333333a17.066667 17.066667 0 1 1 17.083733-29.5424l147.626667 85.333333a17.066667 17.066667 0 0 1-8.5504 31.829334z" opacity=".2" p-id="4763"></path><path d="M142.523733 742.4a17.066667 17.066667 0 0 1-8.567466-31.8464l147.626666-85.333333a17.066667 17.066667 0 1 1 17.083734 29.559466l-147.626667 85.333334a16.930133 16.930133 0 0 1-8.516267 2.286933z" opacity=".361" p-id="4764"></path><path d="M209.92 830.293333a17.066667 17.066667 0 0 1-12.117333-29.098666l120.32-121.173334a17.066667 17.066667 0 0 1 24.2176 24.029867l-120.32 121.1904a16.896 16.896 0 0 1-12.100267 5.051733z" opacity=".4" p-id="4765"></path></svg>
15
+ `;
13
16
  function initNavigationBar(config, container) {
14
17
  if (config.router.mode === 'multi')
15
18
  return;
@@ -21,11 +24,18 @@ function initNavigationBar(config, container) {
21
24
  navigationBarHomeBtn.classList.add('taro-navigation-bar-home');
22
25
  navigationBarBackBtn.innerHTML = back_svg_str;
23
26
  navigationBarHomeBtn.innerHTML = home_svg_str;
27
+ const navigationBarTitleWrap = document.createElement('div');
28
+ navigationBarTitleWrap.classList.add('taro-navigation-bar-title-wrap');
29
+ const navigationBarLoading = document.createElement('div');
30
+ navigationBarLoading.classList.add('taro-navigation-bar-loading');
31
+ navigationBarLoading.innerHTML = loading_svg_str;
24
32
  const navigationBarTitle = document.createElement('div');
25
33
  navigationBarTitle.classList.add('taro-navigation-bar-title');
34
+ navigationBarTitleWrap.appendChild(navigationBarLoading);
35
+ navigationBarTitleWrap.appendChild(navigationBarTitle);
26
36
  navigationBar.appendChild(navigationBarHomeBtn);
27
37
  navigationBar.appendChild(navigationBarBackBtn);
28
- navigationBar.appendChild(navigationBarTitle);
38
+ navigationBar.appendChild(navigationBarTitleWrap);
29
39
  navigationBar.id = 'taro-navigation-bar';
30
40
  container.prepend(navigationBar);
31
41
  loadNavigationBarStyle();
package/dist/router/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { addLeadingSlash } from '@tarojs/runtime';
1
+ import { prependBasename } from '../history.js';
2
2
 
3
3
  class RouterConfig {
4
4
  static set config(e) {
@@ -18,7 +18,7 @@ class RouterConfig {
18
18
  }
19
19
  static get customRoutes() { return this.router.customRoutes || {}; }
20
20
  static isPage(url = '') {
21
- return this.pages.findIndex(e => addLeadingSlash(e) === url) !== -1;
21
+ return this.pages.findIndex(e => prependBasename(e) === url) !== -1;
22
22
  }
23
23
  }
24
24
 
package/dist/router/mpa.js CHANGED
@@ -21,7 +21,7 @@ function createMultiRouter(history, app, config, framework) {
21
21
  if (typeof app.onUnhandledRejection === 'function') {
22
22
  window.addEventListener('unhandledrejection', app.onUnhandledRejection);
23
23
  }
24
- eventCenter.on('__taroH5SetNavigationTitle', setMpaTitle);
24
+ eventCenter.on('__taroH5SetNavigationBarTitle', setMpaTitle);
25
25
  RouterConfig.config = config;
26
26
  const handler = new MultiPageHandler(config, history);
27
27
  const launchParam = {
package/dist/router/navigation-bar.d.ts CHANGED
@@ -4,10 +4,11 @@ interface NavigationBarCache {
4
4
  fontColor?: string;
5
5
  title?: string;
6
6
  show?: boolean;
7
+ loading?: boolean;
7
8
  }
8
9
  declare class NavigationBarHandler {
9
10
  pageContext: PageHandler;
10
- navigationBarElement: Element;
11
+ navigationBarElement: HTMLElement;
11
12
  cache: Record<string, NavigationBarCache>;
12
13
  isLoadDdEntry: boolean;
13
14
  constructor(pageContext: PageHandler);
@@ -16,11 +17,14 @@ declare class NavigationBarHandler {
16
17
  get homeBtnElement(): Element | null;
17
18
  get backBtnElement(): Element | null;
18
19
  get titleElement(): Element | null;
20
+ get loadingElement(): Element | null;
19
21
  init(): void;
20
22
  setNavigationBarElement(): void;
21
23
  load(): void;
22
24
  setCacheValue(): void;
23
25
  setFnBtnState(): void;
26
+ shiftLoadingState(show: boolean): void;
27
+ setNavigationLoading(show?: boolean): void;
24
28
  setNavigationBarBackground(backgroundColor?: string): void;
25
29
  setNavigationBarTextStyle(fontColor?: string): void;
26
30
  setTitle(title?: any): void;
package/dist/router/navigation-bar.js CHANGED
@@ -10,9 +10,12 @@ class NavigationBarHandler {
10
10
  this.cache = {};
11
11
  this.pageContext = pageContext;
12
12
  this.init();
13
- eventCenter.on('__taroH5SetNavigationTitle', (title) => {
13
+ eventCenter.on('__taroH5SetNavigationBarTitle', (title) => {
14
14
  this.setTitle(title);
15
15
  });
16
+ eventCenter.on('__taroH5setNavigationBarLoading', (loading) => {
17
+ this.setNavigationLoading(loading);
18
+ });
16
19
  eventCenter.on('__taroH5setNavigationBarColor', ({ backgroundColor, frontColor }) => {
17
20
  if (typeof backgroundColor === 'string')
18
21
  this.setNavigationBarBackground(backgroundColor);
@@ -44,6 +47,11 @@ class NavigationBarHandler {
44
47
  return null;
45
48
  return (_a = this.navigationBarElement.getElementsByClassName('taro-navigation-bar-title')) === null || _a === void 0 ? void 0 : _a[0];
46
49
  }
50
+ get loadingElement() {
51
+ if (!this.navigationBarElement)
52
+ return null;
53
+ return this.navigationBarElement.getElementsByClassName('taro-navigation-bar-loading')[0];
54
+ }
47
55
  init() {
48
56
  var _a, _b;
49
57
  this.setNavigationBarElement();
@@ -62,6 +70,7 @@ class NavigationBarHandler {
62
70
  this.setFnBtnState();
63
71
  this.setNavigationBarBackground();
64
72
  this.setNavigationBarTextStyle();
73
+ this.setNavigationLoading();
65
74
  }
66
75
  setCacheValue() {
67
76
  const currentPage = this.pageContext.currentPage;
@@ -81,6 +90,41 @@ class NavigationBarHandler {
81
90
  this.fnBtnToggleToHome();
82
91
  }
83
92
  }
93
+ shiftLoadingState(show) {
94
+ if (!this.loadingElement)
95
+ return;
96
+ if (show) {
97
+ this.loadingElement.classList.add('taro-navigation-bar-loading-show');
98
+ }
99
+ else {
100
+ this.loadingElement.classList.remove('taro-navigation-bar-loading-show');
101
+ }
102
+ }
103
+ setNavigationLoading(show) {
104
+ var _a;
105
+ if (!this.navigationBarElement)
106
+ return;
107
+ const currentPage = this.pageContext.currentPage;
108
+ let isShow;
109
+ if (typeof show === 'boolean') {
110
+ isShow = show;
111
+ this.cache[currentPage] &&
112
+ (this.cache[currentPage].loading = isShow);
113
+ }
114
+ else {
115
+ const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.loading;
116
+ if (typeof cacheValue === 'boolean') {
117
+ isShow = cacheValue;
118
+ }
119
+ else {
120
+ // 默认值为 false
121
+ isShow = false;
122
+ this.cache[currentPage] &&
123
+ (this.cache[currentPage].loading = isShow);
124
+ }
125
+ }
126
+ this.shiftLoadingState(isShow);
127
+ }
84
128
  setNavigationBarBackground(backgroundColor) {
85
129
  var _a, _b, _c;
86
130
  if (!this.navigationBarElement)
package/dist/style.js CHANGED
@@ -73,13 +73,13 @@ ${enableTabBar ? `
73
73
  function loadNavigationBarStyle() {
74
74
  const css = `
75
75
  .taro-navigation-bar-show {
76
+ display: flex;
76
77
  background: white;
77
78
  position: sticky;
78
79
  z-index: 500;
79
80
  top: 0;
80
81
  padding-bottom: 8px;
81
82
  padding-top: calc(env(safe-area-inset-top) + 8px);
82
- display: flex;
83
83
  justify-content: center;
84
84
  align-items: center;
85
85
  }
@@ -88,12 +88,49 @@ function loadNavigationBarStyle() {
88
88
  display: none;
89
89
  }
90
90
 
91
- .taro-navigation-bar-title {
91
+ .taro-navigation-bar-title-wrap {
92
+ display: flex;
93
+ height: 24px;
94
+ }
95
+
96
+ .taro-navigation-bar-title-wrap > .taro-navigation-bar-loading {
97
+ display: none;
98
+ animation: loading 2s linear infinite;
99
+ }
100
+
101
+ .taro-navigation-bar-title-wrap .taro-navigation-bar-loading.taro-navigation-bar-loading-show {
102
+ display: flex;
103
+ }
104
+
105
+ .taro-navigation-bar-title-wrap > .taro-navigation-bar-title {
92
106
  font-size: 24px;
93
107
  height: 24px;
94
108
  line-height: 24px;
109
+ max-width: 100px;
110
+ white-space: nowrap;
111
+ overflow: hidden;
112
+ line-height: 24px;
113
+ text-overflow: ellipsis;
95
114
  }
96
115
 
116
+ @keyframes loading {
117
+ from {
118
+ transform: rotate(0deg);
119
+ }
120
+ to {
121
+ transform: rotate(360deg);
122
+ }
123
+ }
124
+
125
+ @keyframes loading {
126
+ from {
127
+ transform: rotate(0deg);
128
+ }
129
+ to {
130
+ transform: rotate(360deg);
131
+ }
132
+ }
133
+
97
134
  .taro-navigation-bar-no-icon > .taro-navigation-bar-home {
98
135
  display: none;
99
136
  }
@@ -103,7 +140,7 @@ function loadNavigationBarStyle() {
103
140
  }
104
141
 
105
142
  .taro-navigation-bar-home-icon > .taro-navigation-bar-home {
106
- display: block;
143
+ display: flex;
107
144
  left: 8px;
108
145
  position: absolute;
109
146
  width: 24px;
@@ -111,7 +148,7 @@ function loadNavigationBarStyle() {
111
148
  }
112
149
 
113
150
  .taro-navigation-bar-back-icon > .taro-navigation-bar-back {
114
- display: block;
151
+ display: flex;
115
152
  left: 8px;
116
153
  position: absolute;
117
154
  width: 24px;
package/dist/utils/navigate.d.ts CHANGED
@@ -6,4 +6,5 @@ declare function setNavigationBarStyle(option: {
6
6
  backgroundColor: string;
7
7
  frontColor: string;
8
8
  }): void;
9
- export { isWeixin, isDingTalk, setMpaTitle, setTitle, setNavigationBarStyle };
9
+ declare function setNavigationBarLoading(loading: boolean): void;
10
+ export { isWeixin, isDingTalk, setMpaTitle, setTitle, setNavigationBarStyle, setNavigationBarLoading };
package/dist/utils/navigate.js CHANGED
@@ -19,10 +19,13 @@ function setMpaTitle(title) {
19
19
  }
20
20
  }
21
21
  function setTitle(title) {
22
- eventCenter.trigger('__taroH5SetNavigationTitle', title);
22
+ eventCenter.trigger('__taroH5SetNavigationBarTitle', title);
23
23
  }
24
24
  function setNavigationBarStyle(option) {
25
25
  eventCenter.trigger('__taroH5setNavigationBarColor', option);
26
26
  }
27
+ function setNavigationBarLoading(loading) {
28
+ eventCenter.trigger('__taroH5setNavigationBarLoading', loading);
29
+ }
27
30
 
28
- export { isDingTalk, isWeixin, setMpaTitle, setNavigationBarStyle, setTitle };
31
+ export { isDingTalk, isWeixin, setMpaTitle, setNavigationBarLoading, setNavigationBarStyle, setTitle };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tarojs/router",
3
- "version": "3.6.24",
3
+ "version": "3.6.26-alpha.1",
4
4
  "description": "Taro-router",
5
5
  "browser": "dist/index.js",
6
6
  "main:h5": "dist/index.esm.js",
@@ -44,12 +44,14 @@
44
44
  "rollup-plugin-ts": "^3.0.2",
45
45
  "ts-jest": "^29.0.5",
46
46
  "typescript": "^4.7.4",
47
- "@tarojs/runtime": "3.6.24",
48
- "@tarojs/taro": "3.6.24"
47
+ "@tarojs/runtime": "3.6.26-alpha.1",
48
+ "@tarojs/taro": "3.6.26-alpha.1",
49
+ "@tarojs/shared": "3.6.26-alpha.1"
49
50
  },
50
51
  "peerDependencies": {
51
- "@tarojs/runtime": "3.6.24",
52
- "@tarojs/taro": "3.6.24"
52
+ "@tarojs/runtime": "3.6.26-alpha.1",
53
+ "@tarojs/taro": "3.6.26-alpha.1",
54
+ "@tarojs/shared": "3.6.26-alpha.1"
53
55
  },
54
56
  "scripts": {
55
57
  "prebuild": "pnpm run clean",
package/types/api.d.ts CHANGED
@@ -11,3 +11,8 @@ export interface Option extends Base {
11
11
  export interface NavigateBackOption extends Base {
12
12
  delta: number
13
13
  }
14
+
15
+ export interface NavigateOption extends BaseOption {
16
+ url: string
17
+ events?: Record<string, any>
18
+ }