ionic 页面跳转动画

2018-05-02  本文已影响0人  AndyRony

ionic基于angularjs,页面跳转有两种方式,$state.go('main'),或者ui-sref="main"

1.$state.go('main') 实现app跳转动画,方式之一  ,:

index.html页面:

<body><ion-nav-view></ion-nav-view></body>

页面上main.html页面:

页面主体:<ion-view id="category" view-title="商品分类" hide-back-button="true" cache-view="false" nav-direction="forward">

<ion-scroll>xxxxxxxxxxxxxx</ion-scroll>

<div ng-click="jumpToNextPage()">M</div>

</ion-view>

main.js中:

function jumpToNextPage(){

$state.go("nextPage");

}

这种以state.go跳转的页面,在ion-view标签上必须带上 nav-direction="forward"或者 nav-direction="back",来跳转。

2.ui-sref="main"方式动画跳转

页面上main.html页面:

页面主体<ion-view id="category" view-title="商品分类" hide-back-button="true" cache-view="false">

<ion-scroll>xxxxxxxxxxxxxx</ion-scroll>

<div ui-sref="nextPage"></div>

</ion-view>

main.js文件中不需要处理,ion-view上也不需要携带nav-direction

3.返回页面动画

$ionicHistory.goBack();   js中要注入$ionicHistory

上一篇下一篇

猜你喜欢

热点阅读