通过函数调用 ons-back-button
Call ons-back-button by a function
我是温泉新人UI。我应该如何使用'go-back'-方法返回主页? (就像左后退按钮。)我试图用 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) {
};
动画不同(向前而不是向后),因为使用 profileNavigator.pushPage
方法,您将新页面添加到堆栈而不是返回到旧页面。如果您需要转到主页面,请考虑使用profileNavigator.resetToPage
方法。
$scope.openAboutMeDesc = function (aboutMe) {
profileNavigator.resetToPage('profile-aboutme-desc.html', { animation : 'slide' } );
};
请记住,您可以 select "slide"、"simpleslide"、"lift"、"fade" 和 "none" 之间的交易动画。
有什么不明白的可以看看官方文档:
https://onsen.io/reference/ons-navigator.html
希望对您有所帮助!
我是温泉新人UI。我应该如何使用'go-back'-方法返回主页? (就像左后退按钮。)我试图用 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) {
};
动画不同(向前而不是向后),因为使用 profileNavigator.pushPage
方法,您将新页面添加到堆栈而不是返回到旧页面。如果您需要转到主页面,请考虑使用profileNavigator.resetToPage
方法。
$scope.openAboutMeDesc = function (aboutMe) {
profileNavigator.resetToPage('profile-aboutme-desc.html', { animation : 'slide' } );
};
请记住,您可以 select "slide"、"simpleslide"、"lift"、"fade" 和 "none" 之间的交易动画。
有什么不明白的可以看看官方文档:
https://onsen.io/reference/ons-navigator.html
希望对您有所帮助!