ionic 页面跳转动画

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容