如何重写Onsen UI的ons-back-button行为并保留默认动画？

一、保留默认返回按钮动画的实现方式 #

你当前调用bringPageTop()时用的是普通按钮动画，要模拟原生返回按钮的滑入/滑出效果，只需在调用时显式指定反向滑动动画，和原生返回的动画逻辑对齐即可：

修改你的previous函数：

function previous(page) {
    const prevNav = document.querySelector('#navigator');
    prevNav.bringPageTop(page, {
        animation: 'slide', // 和导航器配置的动画保持一致
        animationOptions: {
            duration: 0.3,
            direction: 'back' // 关键：指定反向动画，还原返回按钮的滑行动画
        }
    });
}

这样既实现了将目标页面移至栈顶的需求，又能触发和原生返回按钮完全一致的滑入/滑出动画。

二、自定义继承ons-back-button的组件（ES6类方案） #

如果想更优雅地封装这个行为，完全可以通过ES6类继承原生ons-back-button，只重写导航逻辑，保留其他原生特性。具体实现如下：

1. 定义自定义组件类，继承Onsen UI原生的返回按钮类：

class CustomBackButton extends OnsBackButtonElement {
    connectedCallback() {
        // 先调用父类的初始化逻辑，保留原生按钮的样式、基础事件绑定
        super.connectedCallback();
        
        // 替换原生点击事件为自定义逻辑
        this.removeEventListener('click', this._onClick);
        this.addEventListener('click', this._customOnClick.bind(this));
    }

    _customOnClick() {
        // 通过自定义属性获取目标页面（可根据需求调整逻辑）
        const targetPage = this.getAttribute('data-target');
        if (!targetPage) return;

        const navigator = document.querySelector('#navigator');
        // 用带反向动画的bringPageTop替代原生popPage
        navigator.bringPageTop(targetPage, {
            animation: 'slide',
            animationOptions: { duration: 0.3, direction: 'back' }
        });
    }
}

// 注册自定义元素，即可在HTML中使用
customElements.define('custom-back-button', CustomBackButton);

2. 在HTML中使用自定义组件：

<custom-back-button data-target="page1.html">返回</custom-back-button>

这个方案完全继承了ons-back-button的样式、无障碍特性等原生行为，仅替换核心导航逻辑，适合多页面复用场景。

补充提示 #

如果不需要固定目标页面，也可以通过导航栈历史获取上一个页面，比如navigator.pages[navigator.pages.length - 2]，但要注意判断栈的长度避免报错。

内容的提问来源于stack exchange，提问作者denkom