博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ionic--页面切换动画
阅读量:6572 次
发布时间:2019-06-24

本文共 1271 字,大约阅读时间需要 4 分钟。

hot3.png

问题:有的页面切换没有动画效果。

解决方法:

   方法一:只要在标签中加入nav-direction="back"(向右滑动)或nav-direction="forward"(向左滑动)就可以实现了。

          例如:<a class="button icon-left ion-ios-arrow-left button-clear" ui-sref="tab.news" nav-direction="back">Back</a>

 

   方法二:只要在$state.go()后面加上 $ionicViewSwitcher.nextDirection("back")(向右滑动)或 $ionicViewSwitcher.nextDirection("forwoard")(向左滑动)就可以实现跟加nav-direction一样的效果了,记得要注入ionicViewSwitcher服务。

 

如果想要在Android手机的返回键也要实现这个效果怎么办呢。

 

             1.首先要在.run方法中注册返回键事件。

             2.在$ionicHistory.goBack()后加上$ionicViewSwitcher.nextDirection("back")(向右滑动)或 $ionicViewSwitcher.nextDirection("forwoard")(向左滑动)即可。

 

  例如:

$ionicPlatform.registerBackButtonAction(function (e) {

            e.preventDefault();

            function showConfirm() {

                var confirmPopup = $ionicPopup.confirm({

                    title: '<strong>退出应用?</strong>',

                    template: '你确定要退出应用吗?',

                    okText: '退出',

                    cancelText: '取消'

                });

                confirmPopup.then(function (res) {

                    if (res) {

                        ionic.Platform.exitApp();

                    } else {

                        // Don't close

                    }

                });

            }

            // Is there a page to go back to?

            if ($location.path() == '/tab/dash') {

                showConfirm();

            } else if ($ionicHistory.backView()) {

                // Go back in history

                $ionicHistory.goBack();

$ionicViewSwitcher.nextDirection("back");

            } else {

                // This is the last page: Show confirmation popup

                showConfirm();

            }

            return false;

        }, 101);

转载于:https://my.oschina.net/lwenhao/blog/1517810

你可能感兴趣的文章
2018-2019-2 网络对抗技术 20165318 Exp1 PC平台逆向破解
查看>>
关于图片或者文件在数据库的存储方式归纳
查看>>
存储过程和SQL语句比较及存储过程在C#中调用方法
查看>>
hihocoder 1014 Trie树
查看>>
ADO.NET笔记——使用DataSet返回数据
查看>>
【Spark篇】---SparkSQL on Hive的配置和使用
查看>>
【机器学习】--关联规则算法从初识到应用
查看>>
windows 下nginx php安装
查看>>
MOTO XT702添加开机音乐
查看>>
Codeforces Round #565 (Div. 3) C. Lose it!
查看>>
Python脚本日志系统
查看>>
Spring异常——BeanNotOfRequiredTypeException
查看>>
B0BO TFS 安装指南(转载)
查看>>
gulp常用命令
查看>>
TCP(Socket基础编程)
查看>>
RowSet的使用
查看>>
表单提交中的input、button、submit的区别
查看>>
每日一记--cookie
查看>>
约瑟夫环
查看>>
S5:桥接模式 Bridge
查看>>