@tarojs/router 4.0.0-beta.1 → 4.0.0-beta.100

package/dist/router/page.d.ts

@@ -1,15 +1,20 @@
-import { PageInstance } from '@tarojs/runtime';
+import NavigationBarHandler from './navigation-bar';
+import type { PageInstance } from '@tarojs/runtime';
 import type { PageConfig, RouterAnimate } from '@tarojs/taro';
+import type { History } from 'history';
 import type { Route, SpaRouterConfig } from '../../types/router';
 export default class PageHandler {
-    protected config: SpaRouterConfig;
+    history: History;
+    config: SpaRouterConfig;
     protected readonly defaultAnimation: RouterAnimate;
     protected unloadTimer: ReturnType<typeof setTimeout> | null;
     protected hideTimer: ReturnType<typeof setTimeout> | null;
     protected lastHidePage: HTMLElement | null;
     protected lastUnloadPage: PageInstance | null;
+    protected navigationBarHandler: NavigationBarHandler;
     homePage: string;
-    constructor(config: SpaRouterConfig);
+    originHomePage: string;
+    constructor(config: SpaRouterConfig, history: History);
     get currentPage(): string;
     get appId(): string;
     get router(): import("../../types/router").Router;
@@ -23,9 +28,11 @@ export default class PageHandler {
     get animationDuration(): number;
     set pathname(p: string);
     get pathname(): string;
+    get originPathname(): string;
     get basename(): string;
     get pageConfig(): Route | undefined;
     isTabBar(pathname: string): boolean;
+    isDefaultNavigationStyle(): boolean;
     isSamePage(page?: PageInstance | null): boolean;
     get search(): string;
     get usingWindowScroll(): boolean;
@@ -37,7 +44,7 @@ export default class PageHandler {
     load(page: PageInstance, pageConfig: Route | undefined, stampId: string, pageNo?: number): void;
     unload(page?: PageInstance | null, delta?: number, top?: boolean): void;
     show(page?: PageInstance | null, pageConfig?: Route, pageNo?: number): void;
-    hide(page?: PageInstance | null): void;
+    hide(page?: PageInstance | null, animation?: boolean): void;
     addAnimation(pageEl?: HTMLElement | null, first?: boolean): void;
     getPageContainer(page?: PageInstance | null): HTMLElement | null;
     getScrollingElement(page?: PageInstance | null): (Window & typeof globalThis) | HTMLElement;

package/dist/router/page.js

@@ -1,19 +1,23 @@
-/* eslint-disable dot-notation */
-import { Current, eventCenter, requestAnimationFrame } from '@tarojs/runtime';
+import { getHomePage, getCurrentPage, addLeadingSlash, stripBasename, stripTrailing, requestAnimationFrame, eventCenter, Current } from '@tarojs/runtime';
 import queryString from 'query-string';
-import { bindPageResize } from '../events/resize';
-import { bindPageScroll } from '../events/scroll';
-import { history, setHistoryMode } from '../history';
-import { loadAnimateStyle, loadRouterStyle } from '../style';
-import { initTabbar } from '../tabbar';
-import { addLeadingSlash, getCurrentPage, getHomePage, routesAlias, stripBasename, stripTrailing } from '../utils';
-import stacks from './stack';
-export default class PageHandler {
-    constructor(config) {
+import { bindPageResize } from '../events/resize.js';
+import { bindPageScroll } from '../events/scroll.js';
+import { setHistory, history } from '../history.js';
+import { loadAnimateStyle, loadRouterStyle } from '../style.js';
+import { routesAlias } from '../utils/index.js';
+import NavigationBarHandler from './navigation-bar.js';
+import stacks from './stack.js';
+
+/* eslint-disable dot-notation */
+class PageHandler {
+    constructor(config, history) {
+        this.history = history;
         this.defaultAnimation = { duration: 300, delay: 50 };
         this.config = config;
         this.homePage = getHomePage(this.routes[0].path, this.basename, this.customRoutes, this.config.entryPagePath);
+        this.originHomePage = this.config.entryPagePath || this.routes[0].path || this.basename;
         this.mount();
+        this.navigationBarHandler = new NavigationBarHandler(this);
     }
     get currentPage() {
         const routePath = getCurrentPage(this.routerMode, this.basename);
@@ -45,14 +49,14 @@ export default class PageHandler {
     }
     set pathname(p) { this.router.pathname = p; }
     get pathname() { return this.router.pathname; }
+    // Note: 把 pathname 转换为原始路径，主要是处理 customRoutes 和 basename
+    get originPathname() { return routesAlias.getOrigin(addLeadingSlash(stripBasename(this.pathname, this.basename))); }
     get basename() { return this.router.basename || ''; }
     get pageConfig() {
-        const routePath = addLeadingSlash(stripBasename(this.pathname, this.basename));
         const homePage = addLeadingSlash(this.homePage);
         return this.routes.find(r => {
-            var _a;
             const pagePath = addLeadingSlash(r.path);
-            return [pagePath, homePage].includes(routePath) || ((_a = routesAlias.getConfig(pagePath)) === null || _a === void 0 ? void 0 : _a.includes(routePath));
+            return [pagePath, homePage].includes(this.originPathname);
         });
     }
     isTabBar(pathname) {
@@ -69,6 +73,14 @@ export default class PageHandler {
         })) === null || _a === void 0 ? void 0 : _a[0]) || routePath;
         return !!pagePath && this.tabBarList.some(t => stripTrailing(t.pagePath) === pagePath);
     }
+    isDefaultNavigationStyle() {
+        var _a, _b;
+        let style = (_a = this.config.window) === null || _a === void 0 ? void 0 : _a.navigationStyle;
+        if (typeof ((_b = this.pageConfig) === null || _b === void 0 ? void 0 : _b.navigationStyle) === 'string') {
+            style = this.pageConfig.navigationStyle;
+        }
+        return style !== 'custom';
+    }
     isSamePage(page) {
         const routePath = stripBasename(this.pathname, this.basename);
         const pagePath = stripBasename(page === null || page === void 0 ? void 0 : page.path, this.basename);
@@ -107,40 +119,11 @@ export default class PageHandler {
         return Object.assign(Object.assign({}, query), options);
     }
     mount() {
-        setHistoryMode(this.routerMode, this.router.basename);
+        setHistory(this.history, this.basename);
         this.pathname = history.location.pathname;
+        // Note: 注入页面样式
         this.animation && loadAnimateStyle(this.animationDuration);
-        loadRouterStyle(this.usingWindowScroll);
-        const appId = this.appId;
-        let app = document.getElementById(appId);
-        let isPosition = true;
-        if (!app) {
-            app = document.createElement('div');
-            app.id = appId;
-            isPosition = false;
-        }
-        const appWrapper = (app === null || app === void 0 ? void 0 : app.parentNode) || (app === null || app === void 0 ? void 0 : app.parentElement) || document.body;
-        app.classList.add('taro_router');
-        if (this.tabBarList.length > 1) {
-            const container = document.createElement('div');
-            container.classList.add('taro-tabbar__container');
-            container.id = 'container';
-            const panel = document.createElement('div');
-            panel.classList.add('taro-tabbar__panel');
-            panel.appendChild(app.cloneNode(true));
-            container.appendChild(panel);
-            if (!isPosition) {
-                appWrapper.appendChild(container);
-            }
-            else {
-                appWrapper.replaceChild(container, app);
-            }
-            initTabbar(this.config);
-        }
-        else {
-            if (!isPosition)
-                appWrapper.appendChild(app);
-        }
+        loadRouterStyle(this.tabBarList.length > 1, this.usingWindowScroll);
     }
     onReady(page, onLoad = true) {
         var _a;
@@ -175,19 +158,24 @@ export default class PageHandler {
         if (pageEl) {
             pageEl.classList.remove('taro_page_shade');
             this.isTabBar(this.pathname) && pageEl.classList.add('taro_tabbar_page');
+            this.isDefaultNavigationStyle() && pageEl.classList.add('taro_navigation_page');
             this.addAnimation(pageEl, pageNo === 0);
             (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
+            this.navigationBarHandler.load();
             this.bindPageEvents(page, pageConfig);
             this.triggerRouterChange();
         }
         else {
+            // FIXME 在 iOS 端快速切换页面时，可能不会执行回调注入对应类名导致 TabBar 白屏
             (_b = page.onLoad) === null || _b === void 0 ? void 0 : _b.call(page, param, () => {
                 var _a;
                 pageEl = this.getPageContainer(page);
                 this.isTabBar(this.pathname) && (pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_tabbar_page'));
+                this.isDefaultNavigationStyle() && (pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_navigation_page'));
                 this.addAnimation(pageEl, pageNo === 0);
-                this.onReady(page, true);
                 (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
+                this.navigationBarHandler.load();
+                this.onReady(page, true);
                 this.bindPageEvents(page, pageConfig);
                 this.triggerRouterChange();
             });
@@ -241,6 +229,7 @@ export default class PageHandler {
             pageEl.classList.remove('taro_page_shade');
             this.addAnimation(pageEl, pageNo === 0);
             (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
+            this.navigationBarHandler.load();
             this.bindPageEvents(page, pageConfig);
             this.triggerRouterChange();
         }
@@ -249,31 +238,43 @@ export default class PageHandler {
                 var _a;
                 pageEl = this.getPageContainer(page);
                 this.addAnimation(pageEl, pageNo === 0);
-                this.onReady(page, false);
                 (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
+                this.navigationBarHandler.load();
+                this.onReady(page, false);
                 this.bindPageEvents(page, pageConfig);
                 this.triggerRouterChange();
             });
         }
     }
-    hide(page) {
-        var _a;
+    hide(page, animation = false) {
+        var _a, _b, _c, _d, _e, _f, _g;
         if (!page)
             return;
         // NOTE: 修复多页并发问题，此处可能因为路由跳转过快，执行时页面可能还没有创建成功
         const pageEl = this.getPageContainer(page);
         if (pageEl) {
-            if (this.hideTimer) {
-                clearTimeout(this.hideTimer);
-                this.hideTimer = null;
-                pageEl.classList.add('taro_page_shade');
+            if (animation) {
+                if (this.hideTimer) {
+                    clearTimeout(this.hideTimer);
+                    this.hideTimer = null;
+                    (_c = (_b = (_a = this.lastHidePage) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add) === null || _c === void 0 ? void 0 : _c.call(_b, 'taro_page_shade');
+                }
+                this.lastHidePage = pageEl;
+                this.hideTimer = setTimeout(() => {
+                    this.hideTimer = null;
+                    pageEl.classList.add('taro_page_shade');
+                }, this.animationDuration + this.animationDelay);
+                (_d = page.onHide) === null || _d === void 0 ? void 0 : _d.call(page);
             }
-            this.lastHidePage = pageEl;
-            this.hideTimer = setTimeout(() => {
-                this.hideTimer = null;
+            else {
+                if (this.hideTimer) {
+                    clearTimeout(this.hideTimer);
+                    this.hideTimer = null;
+                    (_g = (_f = (_e = this.lastHidePage) === null || _e === void 0 ? void 0 : _e.classList) === null || _f === void 0 ? void 0 : _f.add) === null || _g === void 0 ? void 0 : _g.call(_f, 'taro_page_shade');
+                }
                 pageEl.classList.add('taro_page_shade');
-            }, this.animationDuration + this.animationDelay);
-            (_a = page.onHide) === null || _a === void 0 ? void 0 : _a.call(page);
+                this.lastHidePage = pageEl;
+            }
         }
         else {
             setTimeout(() => this.hide(page), 0);
@@ -334,3 +335,5 @@ export default class PageHandler {
         }, 0);
     }
 }
+
+export { PageHandler as default };

package/dist/router/spa.d.ts

@@ -1,3 +1,4 @@
 import type { AppInstance } from '@tarojs/runtime';
+import type { History } from 'history';
 import type { SpaRouterConfig } from '../../types/router';
-export declare function createRouter(app: AppInstance, config: SpaRouterConfig, framework?: string): () => void;
+export declare function createRouter(history: History, app: AppInstance, config: SpaRouterConfig, framework?: string): () => void;

package/dist/router/spa.js

@@ -1,31 +1,26 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-/* eslint-disable dot-notation */
-import { createPageConfig, Current, eventCenter, hooks, incrementId, stringify, } from '@tarojs/runtime';
-import { Action as LocationAction } from 'history';
+import { __awaiter } from 'tslib';
+import { incrementId, addLeadingSlash, eventCenter, stripBasename, Current, safeExecute, createPageConfig, hooks, stringify } from '@tarojs/runtime';
+import { Action } from 'history';
 import UniversalRouter from 'universal-router';
-import { history, prependBasename } from '../history';
-import { addLeadingSlash, routesAlias, stripBasename } from '../utils';
-import { setTitle } from '../utils/navigate';
-import { RouterConfig } from '.';
-import PageHandler from './page';
-import stacks from './stack';
+import { prependBasename } from '../history.js';
+import { routesAlias } from '../utils/index.js';
+import { RouterConfig } from './index.js';
+import PageHandler from './page.js';
+import stacks from './stack.js';
+
 const createStampId = incrementId();
 let launchStampId = createStampId();
-export function createRouter(app, config, framework) {
+function createRouter(history, app, config, framework) {
     var _a, _b;
     if (typeof app.onUnhandledRejection === 'function') {
         window.addEventListener('unhandledrejection', app.onUnhandledRejection);
     }
     RouterConfig.config = config;
-    const handler = new PageHandler(config);
+    const handler = new PageHandler(config, history);
+    // Note: 弱网情况下，快速切换 tab，会造成同个页面实例被多次挂在到页面上，原因是资源请求是异步的，短时间内发起多个请求，
+    // 会在资源加载完成后，同时走到挂载的逻辑，造成 pageStampId 更新不及时，两个 page 的Id 相同，后面很多操作是通过 getElementById 来进行的
+    // 所以需要加一个锁来应对这个情况
+    const pageLock = {};
     routesAlias.set(handler.router.customRoutes);
     const basename = handler.router.basename;
     const routes = handler.routes.map(route => {
@@ -47,29 +42,35 @@ export function createRouter(app, config, framework) {
     eventCenter.trigger('__taroRouterLaunch', launchParam);
     (_a = app.onLaunch) === null || _a === void 0 ? void 0 : _a.call(app, launchParam);
     app.onError && window.addEventListener('error', e => { var _a; return (_a = app.onError) === null || _a === void 0 ? void 0 : _a.call(app, e.message); });
-    const render = ({ location, action }) => __awaiter(this, void 0, void 0, function* () {
-        var _c, _d, _e, _f, _g, _h;
-        handler.pathname = decodeURI(location.pathname);
-        if ((_c = window.__taroAppConfig) === null || _c === void 0 ? void 0 : _c.usingWindowScroll)
+    const render = (_c) => __awaiter(this, [_c], void 0, function* ({ location, action }) {
+        var _d, _e, _f, _g, _h, _j, _k, _l;
+        // Note: 由于下面有异步加载操作 先不要在这里去设置 handler.pathname
+        const currentPathname = decodeURI(location.pathname);
+        if ((_d = window.__taroAppConfig) === null || _d === void 0 ? void 0 : _d.usingWindowScroll)
             window.scrollTo(0, 0);
         eventCenter.trigger('__taroRouterChange', {
             toLocation: {
-                path: handler.pathname
+                path: currentPathname
             }
         });
-        let element, params;
+        let element, context, params;
+        const routerPath = handler.router.forcePath || currentPathname;
+        pageLock[routerPath] = typeof pageLock[routerPath] === 'number' ? pageLock[routerPath] + 1 : 1;
+        const currentLock = pageLock[routerPath];
+        let postLock;
         try {
-            const result = yield router.resolve(handler.router.forcePath || handler.pathname);
-            [element, , params] = yield Promise.all(result);
+            const result = yield router.resolve(routerPath);
+            [element, context, params] = yield Promise.all(result);
+            postLock = pageLock[routerPath];
         }
         catch (error) {
             if (error.status === 404) {
                 const notFoundEvent = {
                     isEntryPage: stacks.length === 0,
-                    path: handler.pathname,
+                    path: currentPathname,
                     query: handler.getQuery(createStampId()),
                 };
-                (_d = app.onPageNotFound) === null || _d === void 0 ? void 0 : _d.call(app, notFoundEvent);
+                (_e = app.onPageNotFound) === null || _e === void 0 ? void 0 : _e.call(app, notFoundEvent);
                 eventCenter.trigger('__taroRouterNotFound', notFoundEvent);
             }
             else if (/Loading hot update .* failed./.test(error.message)) {
@@ -77,22 +78,36 @@ export function createRouter(app, config, framework) {
                 window.location.reload();
             }
             else {
-                throw new Error(error);
+                throw error;
             }
         }
-        if (!element)
+        if (!element || currentLock !== postLock)
             return;
-        const pageConfig = handler.pageConfig;
-        let enablePullDownRefresh = ((_e = config === null || config === void 0 ? void 0 : config.window) === null || _e === void 0 ? void 0 : _e.enablePullDownRefresh) || false;
+        // Note: 异步结束后，在设置 handler.pathname
+        // context.pathname 在 universal-router 被处理过了，是发起资源请求的时候传入的 pathname，即 await router.resolve(routerPath) 这个 routerPath
+        handler.pathname = context.pathname;
+        const { pathname, pageConfig } = handler;
+        let enablePullDownRefresh = ((_f = config === null || config === void 0 ? void 0 : config.window) === null || _f === void 0 ? void 0 : _f.enablePullDownRefresh) || false;
+        let navigationStyle = ((_g = config === null || config === void 0 ? void 0 : config.window) === null || _g === void 0 ? void 0 : _g.navigationStyle) || 'default';
+        let navigationBarTextStyle = ((_h = config === null || config === void 0 ? void 0 : config.window) === null || _h === void 0 ? void 0 : _h.navigationBarTextStyle) || 'white';
+        let navigationBarBackgroundColor = ((_j = config === null || config === void 0 ? void 0 : config.window) === null || _j === void 0 ? void 0 : _j.navigationBarBackgroundColor) || '#000000';
         if (pageConfig) {
-            setTitle((_f = pageConfig.navigationBarTitleText) !== null && _f !== void 0 ? _f : document.title);
             if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
                 enablePullDownRefresh = pageConfig.enablePullDownRefresh;
             }
+            if (typeof pageConfig.navigationStyle === 'string') {
+                navigationStyle = pageConfig.navigationStyle;
+            }
+            if (typeof pageConfig.navigationBarTextStyle === 'string') {
+                navigationBarTextStyle = pageConfig.navigationBarTextStyle;
+            }
+            if (typeof pageConfig.navigationBarBackgroundColor === 'string') {
+                navigationBarBackgroundColor = pageConfig.navigationBarBackgroundColor;
+            }
         }
+        eventCenter.trigger('__taroSetNavigationStyle', navigationStyle, navigationBarTextStyle, navigationBarBackgroundColor);
         const currentPage = Current.page;
-        const pathname = handler.pathname;
-        const methodName = (_g = stacks.method) !== null && _g !== void 0 ? _g : '';
+        const methodName = (_k = stacks.method) !== null && _k !== void 0 ? _k : '';
         const cacheTabs = stacks.getTabs();
         let shouldLoad = false;
         stacks.method = '';
@@ -107,10 +122,11 @@ export function createRouter(app, config, framework) {
             }
             shouldLoad = true;
         }
-        else if (currentPage && handler.isTabBar(handler.pathname)) {
+        else if (currentPage && handler.isTabBar(pathname)) {
             if (handler.isSamePage(currentPage))
                 return;
             if (handler.isTabBar(currentPage.path)) {
+                // NOTE: 从 tabBar 页面切换到 tabBar 页面
                 handler.hide(currentPage);
                 stacks.pushTab(currentPage.path.split('?')[0]);
             }
@@ -124,8 +140,8 @@ export function createRouter(app, config, framework) {
                     handler.unload(currentPage, stacks.length, true);
                 }
             }
-            if (cacheTabs[handler.pathname]) {
-                stacks.popTab(handler.pathname);
+            if (cacheTabs[pathname]) {
+                stacks.popTab(pathname);
                 return handler.show(stacks.getItem(0), pageConfig, 0);
             }
             shouldLoad = true;
@@ -154,11 +170,11 @@ export function createRouter(app, config, framework) {
             shouldLoad = true;
         }
         else if (action === 'PUSH') {
-            handler.hide(currentPage);
+            handler.hide(currentPage, true);
             shouldLoad = true;
         }
         if (shouldLoad || stacks.length < 1) {
-            const el = (_h = element.default) !== null && _h !== void 0 ? _h : element;
+            const el = (_l = element.default) !== null && _l !== void 0 ? _l : element;
             const loadConfig = Object.assign({}, pageConfig);
             const stacksIndex = stacks.length;
             delete loadConfig['path'];
@@ -181,7 +197,29 @@ export function createRouter(app, config, framework) {
     if (routePath === '/') {
         history.replace(prependBasename(handler.homePage + history.location.search));
     }
-    render({ location: history.location, action: LocationAction.Push });
+    render({ location: history.location, action: Action.Push });
     (_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, launchParam);
+    window.addEventListener('visibilitychange', () => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const currentPath = ((_a = Current.page) === null || _a === void 0 ? void 0 : _a.path) || '';
+        const path = currentPath.substring(0, currentPath.indexOf('?'));
+        const param = {};
+        // app的 onShow/onHide 生命周期的路径信息为当前页面的路径
+        Object.assign(param, launchParam, { path });
+        if (document.visibilityState === 'visible') {
+            (_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, param);
+            // 单页面app显示后一刻会触发当前 page.onShow 生命周期函数
+            (_d = (_c = Current.page) === null || _c === void 0 ? void 0 : _c.onShow) === null || _d === void 0 ? void 0 : _d.call(_c);
+        }
+        else {
+            // 单页面app隐藏前一刻会触发当前 page.onHide 生命周期函数
+            if ((_e = Current.page) === null || _e === void 0 ? void 0 : _e.path) {
+                safeExecute((_f = Current.page) === null || _f === void 0 ? void 0 : _f.path, 'onHide');
+            }
+            (_g = app.onHide) === null || _g === void 0 ? void 0 : _g.call(app, param);
+        }
+    });
     return history.listen(render);
 }
+
+export { createRouter };

package/dist/router/stack.d.ts

@@ -1,4 +1,4 @@
-import { PageInstance } from '@tarojs/runtime';
+import type { PageInstance } from '@tarojs/runtime';
 declare class Stacks {
     stacks: PageInstance[];
     backDelta: number;

package/dist/router/stack.js

@@ -78,4 +78,5 @@ class Stacks {
     }
 }
 const stacks = new Stacks();
-export default stacks;
+
+export { stacks as default };

package/dist/style.d.ts

@@ -5,4 +5,9 @@ export declare function loadAnimateStyle(ms?: number): void;
 /**
  * 插入路由相关样式
  */
-export declare function loadRouterStyle(usingWindowScroll: boolean): void;
+export declare function loadRouterStyle(enableTabBar: boolean, enableWindowScroll: boolean): void;
+/**
+ * 插入导航栏相关的样式
+*/
+export declare function loadNavigationBarStyle(): void;
+export declare function addStyle(css: any): void;

package/dist/style.js

@@ -1,8 +1,12 @@
 /**
  * 插入页面动画需要的样式
  */
-export function loadAnimateStyle(ms = 300) {
+function loadAnimateStyle(ms = 300) {
     const css = `
+body {
+  /* 防止 iOS 页面滚动 */
+  overflow: hidden;
+}
 .taro_router > .taro_page {
   position: absolute;
   left: 0;
@@ -18,6 +22,7 @@ export function loadAnimateStyle(ms = 300) {
 .taro_router > .taro_page.taro_tabbar_page,
 .taro_router > .taro_page.taro_page_show.taro_page_stationed {
   transform: none;
+  transition: none;
 }
 
 .taro_router > .taro_page.taro_page_show {
@@ -29,7 +34,7 @@ export function loadAnimateStyle(ms = 300) {
 /**
  * 插入路由相关样式
  */
-export function loadRouterStyle(usingWindowScroll) {
+function loadRouterStyle(enableTabBar, enableWindowScroll) {
     const css = `
   .taro_router {
     position: relative;
@@ -40,13 +45,13 @@ export function loadRouterStyle(usingWindowScroll) {
   .taro_page {
     width: 100%;
     height: 100%;
-  ${usingWindowScroll ? '' : `
+${enableWindowScroll ? '' : `
     overflow-x: hidden;
     overflow-y: scroll;
     max-height: 100vh;
-  `}
+`}
   }
-
+${enableTabBar ? `
   .taro-tabbar__container > .taro-tabbar__panel {
     overflow: hidden;
   }
@@ -56,10 +61,102 @@ export function loadRouterStyle(usingWindowScroll) {
     max-height: calc(100vh - var(--taro-tabbar-height) - env(safe-area-inset-bottom));
   }
 
-  .taro_page_shade,
-  .taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child) {
+` : ''}
+  .taro_page_shade:has(+.taro_page_stationed),
+  .taro_page_shade.taro_tabbar_page,
+  .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) {
+    display: none;
+  }
+`;
+    addStyle(css);
+}
+/**
+ * 插入导航栏相关的样式
+*/
+function loadNavigationBarStyle() {
+    const css = `
+  .taro-navigation-bar-show {
+    display: flex;
+    background: white;
+    position: sticky;
+    z-index: 500;
+    top: 0;
+    padding-bottom: 8px;
+    padding-top: calc(env(safe-area-inset-top) + 8px);
+    justify-content: center;
+    align-items: center;
+  }
+
+  .taro-navigation-bar-hide {
+    display: none;
+  }
+
+  .taro-navigation-bar-title-wrap {
+    display: flex;
+    height: 24px;
+  }
+
+  .taro-navigation-bar-title-wrap > .taro-navigation-bar-loading {
+    display: none;
+    animation: loading 2s linear infinite;
+  }
+
+  .taro-navigation-bar-title-wrap .taro-navigation-bar-loading.taro-navigation-bar-loading-show {
+    display: flex;
+  }
+
+  .taro-navigation-bar-title-wrap > .taro-navigation-bar-title {
+    font-size: 24px;
+    height: 24px;
+    line-height: 24px;
+    max-width: 100px;
+    white-space: nowrap;
+    overflow: hidden;
+    line-height: 24px;
+    text-overflow: ellipsis;
+  }
+
+  @keyframes loading {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes loading {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .taro-navigation-bar-no-icon > .taro-navigation-bar-home {
     display: none;
   }
+
+  .taro-navigation-bar-no-icon > .taro-navigation-bar-back {
+    display: none;
+  }
+
+  .taro-navigation-bar-home-icon > .taro-navigation-bar-home {
+    display: flex;
+    left: 8px;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+  }
+
+  .taro-navigation-bar-back-icon > .taro-navigation-bar-back {
+    display: flex;
+    left: 8px;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+  }
 `;
     addStyle(css);
 }
@@ -70,3 +167,5 @@ function addStyle(css) {
     style.innerHTML = css;
     document.getElementsByTagName('head')[0].appendChild(style);
 }
+
+export { addStyle, loadAnimateStyle, loadNavigationBarStyle, loadRouterStyle };

package/dist/tabbar.d.ts

@@ -1,2 +1,3 @@
 import { AppConfig } from '@tarojs/taro';
-export declare function initTabbar(config: AppConfig): void;
+import type { History } from 'history';
+export declare function initTabbar(config: AppConfig, history: History): void;