Cordova iOS页面跳转求助：新手需实现按钮点击跳转至下一页

基础实现步骤 #

1. 准备页面文件 #

创建两个HTML页面（比如index.html和second.html），分别作为起始页和目标页。

2. 起始页添加跳转按钮与逻辑 #

在首页中添加按钮，绑定点击事件实现跳转，同时加入iOS风格的滑动过渡动画，贴近原生导航控制器的体验：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页</title>
    <style>
        /* 模拟iOS导航栏样式 */
        .navbar {
            background: #fff;
            border-bottom: 1px solid #ccc;
            padding: 15px;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
        }
        .content {
            padding: 20px;
        }
        .btn {
            background: #007AFF;
            color: #fff;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
        }
        /* 跳转过渡动画 */
        .push-transition {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            transform: translateX(100%);
            transition: transform 0.3s ease;
            z-index: 999;
        }
        .push-transition.active {
            transform: translateX(0);
        }
    </style>
</head>
<body>
    <div class="navbar">首页</div>
    <div class="content">
        <button class="btn" id="goToSecond">点击跳转至下一页</button>
    </div>

    <script src="cordova.js"></script>
    <script>
        // 必须等待Cordova加载完成后执行逻辑
        document.addEventListener('deviceready', () => {
            document.getElementById('goToSecond').addEventListener('click', () => {
                // 创建过渡层实现滑动效果
                const transitionEl = document.createElement('div');
                transitionEl.className = 'push-transition';
                document.body.appendChild(transitionEl);
                
                // 触发滑动动画
                setTimeout(() => transitionEl.classList.add('active'), 10);
                
                // 动画结束后跳转页面
                transitionEl.addEventListener('transitionend', () => {
                    window.location.href = 'second.html';
                });
            });
        }, false);
    </script>
</body>
</html>

3. 目标页添加返回功能 #

在second.html中添加返回按钮，搭配返回动画还原原生pop效果：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>第二页</title>
    <style>
        .navbar {
            background: #fff;
            border-bottom: 1px solid #ccc;
            padding: 15px;
            font-size: 18px;
            font-weight: 600;
        }
        .back-btn {
            color: #007AFF;
            text-decoration: none;
            font-size: 16px;
            margin-right: 20px;
        }
        .content {
            padding: 20px;
        }
        /* 返回过渡动画 */
        .pop-transition {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            transform: translateX(0);
            transition: transform 0.3s ease;
            z-index: 999;
        }
        .pop-transition.active {
            transform: translateX(100%);
        }
    </style>
</head>
<body>
    <div class="navbar">
        <a href="#" class="back-btn" id="goBack">← 返回</a>
        第二页
    </div>
    <div class="content">
        <p>这是跳转后的目标页面</p>
    </div>

    <script src="cordova.js"></script>
    <script>
        document.addEventListener('deviceready', () => {
            document.getElementById('goBack').addEventListener('click', (e) => {
                e.preventDefault();
                
                const transitionEl = document.createElement('div');
                transitionEl.className = 'pop-transition';
                document.body.appendChild(transitionEl);
                
                setTimeout(() => transitionEl.classList.add('active'), 10);
                
                transitionEl.addEventListener('transitionend', () => {
                    window.history.back();
                });
            });
        }, false);
    </script>
</body>
</html>

4. 进阶：用插件增强原生体验 #

如果想要更贴近iOS原生导航的功能（比如状态栏适配、手势返回），可以安装cordova-plugin-navigationbar插件：

cordova plugin add cordova-plugin-navigationbar

通过插件API可直接控制导航栏的显示、隐藏及样式，进一步还原原生iOS导航控制器的体验。

内容的提问来源于stack exchange，提问作者VizVyz