[小程序]页面跳转

news/2024/7/20 1:54:34 标签: 小程序, java, 前端

一、页面跳转

        1.声明式导航

        使用<navigate>组件实现(固定式),需要指定url属性(跳转位置)和open-type属性(跳转方式)

                ①跳转tabBar页面

        open-type属性必须指定类型为switchTab

<navigator url="/pages/index/index" open-type="switchTab">跳转index页</navigator>

                ②跳转非tabBar页面

         open-type属性必须指定位置navigate(可以缺省)

<navigator url="/pages/logs/logs" open-type="navigate">跳转log页</navigator>

                ③后退导航

        open-type值为navigateBackdelta值为数字,表示返回的层级(默认为1)

<navigator open-type="navigateBack" delta="1">返回上一级</navigator>

        2.编程式导航

                ①跳转tabBar页面 

        调用API实现,使用wx.switchTab(Object object)方法来跳转,object对象中包含以下属性:

url跳转链接(必填项)
success成功时回调函数
fail失败时回调函数
complete结束时回调函数
<button bindtap='goIndex'>跳转Index页</button>
goIndex(){
    wx.switchTab({
      url: '/pages/index/index',
    })
  },

                ②跳转非tabBar页面

        调用wx.navigateTo实现,参数列表同上

  goLogs(){
    wx.navigateTo({
      url: '/pages/logs/logs',
    })
  },

                ③返回导航

        调用wx.navigateBack实现(不需要指定delta属性)

  goBack(){
    wx.navigateBack()
  },

二、导航传参

        1.声明式导航传参

        类似于http中的GET指令,参数与路径之间使用 ? 进行分隔;参数键与参数之间以 = 相连;不同参数之间用 & 隔开。

<navigator url="pages/show/show?name=Alice&age=18">跳转Show页</navigator>

        2.编程式导航传参

        基本和声明式一致,使用参数路径的方式传参

  goShow(){
    wx.navigateTo({
      url: '/pages/show/show?name=Coco&age=22',
    })
  },

        3.接收参数

        传递给页面的参数可以在对应的onLoad参数中获取,如下:

  onLoad(options) {
    this.setData({name:options.name})
    this.setData({age:options.age})
  },

 


http://www.niftyadmin.cn/n/5338333.html

相关文章

JSON 基本语法以及在Java 中的使用

文章目录 一、JSON 概述1.1 什么是 JSON1.2 JSON数据类型和语法1.3 JSON 优势 二、使用 JSON2.1 在 Java程序中使用 JSON2.2 Jackson的使用2.2.1 Jackson的简单介绍2.2.2 反序列化2.2.3 序列化 参考资料 一、JSON 概述 1.1 什么是 JSON JSON&#xff08;JavaScript Object No…

【docker】之基础篇一

目录 一、docker的简单介绍二、centos7安装docker设置ustc的镜像镜像相关的命令&#xff1a;容器相关的命令创建镜像的三种方式存出和载入镜像创建与启动容器目录挂载导入和导出容器 三、redhat安装docker四、搭建本地私有仓库五、软件部署1.mysql部署2.nginx部署3.tomcat部署 …

新书速览|二进制安全基础

详解C 语言反汇编技术、二进制漏洞挖掘和软件逆向分析方法。配套示例源码、PPT课件、教学大纲、教案、习题答案、作者QQ群答疑。 本书内容 《二进制安全基础》为二进制安全技术知识普及与技术基础教程&#xff0c;不仅能为初学二进制安全技术的读者提供全面、实用的C语言反汇编…

设计模式-资源库模式

设计模式专栏 模式介绍模式特点应用场景资源库模式与关系型数据库的区别代码示例Java实现资源库模式Python实现资源库模式 资源库模式在spring中的应用 模式介绍 资源库模式是一种架构模式&#xff0c;介于领域层与数据映射层&#xff08;数据访问层&#xff09;之间。它的存在…

齐次矩阵的理解深入和在图形学、Unity中的应用

齐次矩阵的理解和在图形学、Unity中的应用 在探讨图形学和Unity中的3D编程时&#xff0c;我们经常会遇到一个非常核心的数学工具——齐次矩阵。这篇文章将一步步深入地探讨齐次矩阵的基本概念、它在图形学中的应用&#xff0c;以及如何在Unity中利用这一概念来创建令人震撼的3…

JAVA SECS发送Report C#处理SECS Report SECS发送事件资料大全 S6F11 建立通讯S1F13

发送S6F11非常简单&#xff0c;只需5~6行代码&#xff0c;最核心是代码清晰易懂。 任何人都可以一看就能上手&#xff0c;如果说用代码可读性作为不可替代性的壁垒就无话可说了。 private void buttonS6F11_Click(object sender, EventArgs e) {int nTransaction 0;// 数据部…

VUE表单中多个el-upload上传组件共享回调函数解决方案

产品需求界面&#xff1a; 在产品配置页面表单中需要上传多个图片&#xff0c;项目中上传组件采用Element Plus 中的 el-upload&#xff0c;目前问题是每个上传组件都需要实现自己的回调&#xff0c;比如:on-change&#xff0c;采用官方推荐标准代码如下&#xff1a; <el-fo…

Hive之set参数大全-9

指定LLAP&#xff08;Low Latency Analytical Processing&#xff09;引擎中的IO&#xff08;输入/输出&#xff09;线程池的大小 hive.llap.io.threadpool.size 是Apache Hive中的一个配置属性&#xff0c;用于指定LLAP&#xff08;Low Latency Analytical Processing&#x…