zoukankan      html  css  js  c++  java
  • uni-app 路由与页面跳转

    文章目录

    • 保留当前页面,跳转到应用内的某个页面
    • 关闭当前页面,跳转到应用内的某个页面
    • 关闭所有页面,打开到应用内的某个页面
    • 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
    • 关闭当前页面,返回上一页面或多级页面
    • 窗口动画

    关键点

    • 跳转到 tabBar 页面只能使用 switchTab 跳转
    • navigateTo, redirectTo 只能打开非 tabBar 页面
    • switchTab 只能打开 tabBar 页面
    • reLaunch 可以打开任意页面
    • 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar
    • 不能在 App.vue 里面进行页面跳转

    保留当前页面,跳转到应用内的某个页面

    /*
    * uni.navigateTo(OBJECT):保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。
    * url   需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,
    * 参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2',path为下一个页面的路径,
    * 下一个页面的onLoad函数可得到传递的参数
    * 
    */
    uni.navigateTo({
        url: 'test?id=1&name=uniapp'
    });
    // test.vue
    export default {
        onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
            console.log(option.id); //打印出上个页面传递的参数。
            console.log(option.name); //打印出上个页面传递的参数。
        }
    }

    关闭当前页面,跳转到应用内的某个页面

    /*
    *  uni.redirectTo(OBJECT)
    * url  需要跳转的应用内非 tabBar 的页面的路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,
    * 不同参数用&分隔;如 'path?key=value&key2=value2'
    */
    uni.redirectTo({
        url: 'test?id=1'
    });

    关闭所有页面,打开到应用内的某个页面

    /*
    *  uni.reLaunch(OBJECT)
    * url  需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;
    * 如 'path?key=value&key2=value2',如果跳转的页面路径是 tabBar 页面则不能带参数
    */
    uni.reLaunch({
        url: 'test?id=1'
    });
    export default {
        onLoad: function (option) {
            console.log(option.id);
        }
    }

    跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

    /*
    *  url 需要跳转的 tabBar 页面的路径(需在 pages.json 的 tabBar 字段定义的页面),路径后不能带参数
    */
    
    //pages.json
    {
      "tabBar": {
        "list": [{
          "pagePath": "pages/index/index",
          "text": "首页"
        },{
          "pagePath": "pages/other/other",
          "text": "其他"
        }]
      }
    }
    
    //other.vue
    uni.switchTab({
        url: '/pages/index/index'
    });

    关闭当前页面,返回上一页面或多级页面

    /*
    * uni.navigateBack(OBJECT)  : 关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层
    *  delta 返回的页面数,如果 delta 大于现有页面数,则返回到首页。
    */
    // 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码
    
    // 此处是A页面
    uni.navigateTo({
        url: 'B?id=1'
    });
    
    // 此处是B页面
    uni.navigateTo({
        url: 'C?id=1'
    });
    
    // 在C页面内 navigateBack,将返回A页面
    uni.navigateBack({
        delta: 2
    });

    窗口动画

    窗口的显示/关闭动画效果,支持在 API、组件、pages.json 中配置,优先级为:API = 组件 > pages.json

    /*
    * API
    * 有效的路由 API
    * navigateTo
    * navigateBack
    */
    uni.navigateTo({
        url: '../test/test',
        animationType: 'pop-in',
        animationDuration: 200
    });
    uni.navigateBack({
        delta: 1,
        animationType: 'pop-out',
        animationDuration: 200
    });
    
    /*
    * 组件
    * open-type 有效值
    * navigateTo
    * navigateBack
    */
    <navigator animation-type="pop-in" animation-duration="300" url="../test/test">navigator</navigator>
    <navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >navigator</navigator>
    
    /*
    * pages.json
    * pages.json 中配置的是窗口显示的动画
    */
    "style": {
        "app-plus": {
            "animationType": "fade-in",
            "animationDuration": 300
        }
    }

    摘自:https://blog.csdn.net/yzp0112/article/details/98031282

  • 相关阅读:
    jQuery EasyUI API 中文文档 可调整尺寸
    jQuery EasyUI API 中文文档 链接按钮(LinkButton)
    jQuery EasyUI API 中文文档 手风琴(Accordion)
    jQuery EasyUI API 中文文档 表单(Form)
    jQuery EasyUI API 中文文档 组合(Combo)
    jQuery EasyUI API 中文文档 布局(Layout)
    jQuery EasyUI API 中文文档 拆分按钮(SplitButton)
    jQuery EasyUI API 中文文档 菜单按钮(MenuButton)
    jQuery EasyUI API 中文文档 搜索框
    jQuery EasyUI API 中文文档 验证框(ValidateBox)
  • 原文地址:https://www.cnblogs.com/wt645631686/p/14375464.html
Copyright © 2011-2022 走看看