通过函数调用 ons-back-button答案

【问题标题】：Call ons-back-button by a function通过函数调用 ons-back-button
【发布时间】：2023-03-31 03:23:02
【问题描述】：

我是 Onsen UI 的新手。我应该如何使用“返回”方法返回主页？（就像左后退按钮一样。）我尝试使用 pushPage-Method 来做到这一点。它可以工作，但动画不同。

带有后退/保存按钮的模板的 HTML

<ons-navigator var="profileNavigator">
<ons-list ng-repeat="item in profileData">
<ons-list-item modifier="chevron" class="profile-list-item-container" ng-click="openAboutMeDesc(item.aboutMe)">
      <div class="profile-list-item-left">
        <i class="fa fa-child fa-profile-list"></i>
      </div>
      <div class="profile-list-item-right">
        <div class="profile-list-item-content">
          <div class="profile-category">Über mich
          </div>

          <span class="profile-desc">{{item.aboutMe}}</span>
        </div>
      </div>
    </ons-list-item>

<ons-template id="profile-aboutme-desc.html">
<ons-page>
      <ons-toolbar>
        <div class="left">
        <ons-back-button>Back</ons-back-button>
        </div>
        <div class="right">
        <ons-toolbar-button ng-click="saveAboutMeDesc(item.naboutMe)">Save</ons-toolbar-button></div>
        <div class="center">About</div>
      </ons-toolbar>
      <ons-row>
      <!--my content-->           
      </ons-row>    
</ons-page>     
</ons-template>
</ons-navigator>

JavaScript

$scope.openAboutMeDesc = function (aboutMe) {
            profileNavigator.pushPage('profile-aboutme-desc.html', { animation : 'slide' } );
        }; 

$scope.saveAboutMeDesc = function (naboutMe) {

};

【问题讨论】：

标签： onsen-ui monaca

【解决方案1】：

动画是不同的（向前而不是向后），因为使用profileNavigator.pushPage 方法，您将新页面添加到堆栈而不是返回到旧页面。如果需要进入主页面，可以考虑使用profileNavigator.resetToPage方法。

$scope.openAboutMeDesc = function (aboutMe) {
  profileNavigator.resetToPage('profile-aboutme-desc.html', { animation : 'slide' } );
};

请记住，您可以在“slide”、“simpleslide”、“lift”、“fade”和“none”之间选择交易动画。

有不清楚的可以看官方文档：

https://onsen.io/reference/ons-navigator.html

希望对你有帮助！

【讨论】：

非常感谢。太棒了！