关于app页面跳转详解

用户笔记 已结
收藏
0 134
梦雨
梦雨 旗舰授权 05月08日 15:33
点赞:0 点赞

虽然APP已安排到位 各位估计对功能上还想自己创建 那么本篇帖子你将会用到

我们在跳转一个页面的时候 网页打开始终是没有过度动画的

使用下方式即可拥有原生app一样的过度动画 

注意:只能在app端运行 用到的函数

navigateBack//关闭当前窗口
navigateTo//跳转一个自定义页面
switchTab//跳转到Tab页面
reLaunch//关闭当前页面跳转到自定义页面
reLaunch//关闭所有页面,打开到应用内的某个页面

引用两个js

<script src="/public/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="/mifenlei/app/uni.webview.1.5.2.js"></script>

完整的html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>觅分类app页面跳转详解</title>
    <style>
        * {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent
}

.cDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    text-align: center;
    width: 100%;
}

.cDiv>div {
    padding: 20px;
    background-color: aliceblue;
    margin: 10px;
}
    </style>
</head>

<body>
    <div class="cDiv">
        <div class="navigateBack">关闭当前窗口</div>
        <div class="navigateTo">跳转一个自定义页面</div>
        <div class="switchTab">跳转到Tab页面</div>
        <div class="reLaunch">关闭当前页面跳转到自定义页面</div>
        <div class="reLaunch">关闭所有页面,打开到应用内的某个页面</div>
    </div>
    <script src="/public/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="/mifenlei/app/uni.webview.1.5.2.js"></script>
    <script type="text/javascript">
        document.addEventListener('UniAppJSBridgeReady', function() {
            //关闭当前页面 返回上一页面
            $(".navigateBack").click(function() {
                uni.navigateBack({
                    delta: 1
                });
            });
            //保留当前页面,跳转到应用内的某个页面
            $(".navigateTo").click(function() {
                uni['navigateTo']({
                    url: "/pages/qita/url?url=http://www.mifenlei.com/"
                });
            });
            //关闭当前页面,跳转到应用内的某个页面。
            $(".redirectTo").click(function() {
                uni['redirectTo']({
                    url: "/pages/qita/url?url=http://www.mifenlei.com/bbs"
                });
            });
            //跳转到Tab页面
            $(".switchTab").click(function() {
                uni['switchTab']({
                    url: "/pages/index/4"
                });
            });
            //关闭所有页面,打开到应用内的某个页面
            $(".reLaunch").click(function() {
                uni['reLaunch']({
                    url: "/pages/qita/url?url=http://www.mifenlei.com/bbs"
                });
            });
        });
    </script>
</body>

</html>

想知道效果在后台APP管理首页配置 首页自定义主键自行配置


回帖

    消灭零回复