[小程序]页面跳转

news2024/11/18 3:23:12

一、页面跳转

        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.coloradmin.cn/o/1410782.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

golang整合rabbitmq,创建交换机并绑定队列

1,如果要开发消息队列,需要创建交换机和队列,通常有2中方式创建,1种是在面板直接创建 2,第二种就是在代码中创建,这里 展示的是go语言代码中创建rabbitmq package mainimport ("fmt""log""github.com/streadway/amqp" )func main() {// 连接R…

将本地项目打包成docker镜像的流程

前置条件&#xff1a; docker 守护进程已经开启 Python3 项目已经编写完成&#xff0c;且可以在本地正常运行 生成docker images 生成项目需引用的包 pip freeze > requirements.txt 确认目录结构配置dockerfile FROM python:3.9.6#代码添加当前目录所有内容到code文件…

无限学模式-“科研创新的加速器:全面掌握ChatGPT,推动研究方法和工作模式现代化!“

2023年随着OpenAI开发者大会的召开&#xff0c;最重磅更新当属GPTs&#xff0c;多模态API&#xff0c;未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车…

前端面试题:topK算法

当面试官问你&#xff0c;在不考虑数字越界的情况下&#xff0c;有1亿条搜索数据&#xff0c;让你从中找到前100条频率高的数据你会怎么实现&#xff1f; 当时&#xff0c;我的第一印象是把数据分组&#xff0c;分别求前多少条&#xff1f;但是没法保证每组的前100条或者多少条…

jQuery语法遍历(过滤)

1、.eq&#xff08;&#xff09;: 减少匹配元素的集合为指定的索的哪一个元素。&#xff08;定位一个元素&#xff09; 法一 <script> $(document).ready(function(){ $("li").eq(1).css("background","red"); …

蓝桥杯备赛 week 1 —— DP 背包问题

目录 &#x1f308;前言&#x1f308;&#xff1a; &#x1f4c1; 01背包问题 分析&#xff1a; dp数组求解&#xff1a; 优化&#xff1a;滚动数组&#xff1a; &#x1f4c1; 完全背包问题 &#x1f4c1; 总结 &#x1f308;前言&#x1f308;&#xff1a; 这篇文章主…

在使用springboot框架式的的script无法通过${}来获取值

今天使用springboot框架做项目&#xff0c;想着来实现一下搜索的下拉框回显功能&#xff0c;然后就一直在报错误&#xff0c;关键是报的错误牛头不对马嘴&#xff0c;检查了一下后端代码&#xff0c;发现没什么问题&#xff0c;就把目光聚焦了.jsp页面的代码 <script type&…

shared_ptr 与 unique_ptr 的转换 笔记

推荐B站文章&#xff1a; 6.shared_ptr与unique_ptr_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV18B4y187uL?p6&vd_sourcea934d7fc6f47698a29dac90a922ba5a3我的往期文章&#xff1a; 独占指针&#xff1a;unique_ptr 与 函数调用-CSDN博客https://blog.csdn.n…

长度计算方法----sizeof与strlen的对比

sizeof sizeof是用来计算内存大小的一种操作符&#xff0c;它只计算内存的大小&#xff0c;无论内存中存放的是什么类型的数据。 单位&#xff1a;字节 举例&#xff1a; #inculde <stdio.h> int main() {int a 10;printf("%d\n", sizeof(a));//a的括号可…

API、DOM、获取元素、事件、文本节点、属性操作

单线程 进程 cpu 资源分配的最小单位一个进程可以有多个线程 线程 cpu调度的最小单位线程建立在进程的建立基础上的一次程序的运行单位 线程分为&#xff1a;单线程 多线程 单线程&#xff1a;js是单线程 &#xff08;同一个时间只能完成一个任务&#xff09;多线程&…

SRPC 框架服务端源码解析

0. RPC Context 保存某些必要的上下文信息&#xff1b; 某端独有功能&#xff1a;Client 获取请求成功或失败 1. RPCBuffer const 和 constexpr 变量的主要区别是&#xff1a;const 变量的初始化可以被推迟到运行期&#xff0c;constexpr 必须在编译期初始化&#xff1b;所…

剪映声音克隆;多位滴滴前中高层加入小红书提速商业化;中国和新加坡互免签证

今日精选 • 剪映推出 AI 音色克隆功能&#xff0c;录制 5 秒声音即可完成克隆• 商业化全面提速&#xff0c;多位滴滴前中高层加入小红书• 2 月 9 日起&#xff0c;中国和新加坡互免签证 科技动态 • 夸克上线大模型新产品“AI PPT”&#xff0c;可一键生成提纲、创作 PPT…

消息中间件之RocketMQ(三)

常见问题 1.重复消费 产生的原因是发送消息时采用了多数分布式消息中间件产品提供的最少一次(at least once)的投递保障&#xff0c;对于这个问题最常见的解决方案,就是消息消费端实现业务幂等&#xff0c;只要保持幂等性&#xff0c;不管来多少条重复消息&#xff0c;最后处…

码多多ChatAI智能聊天系统-一款好用的代码编程助手

码多多ChatAI智能聊天系统可以作为一款智能编程助手&#xff0c;帮助程序员提高编程效率&#xff0c;降低开发成本。 产品介绍 码多多ChatAI智能聊天系统是一款基于人工智能技术的编程辅助工具&#xff0c;它通过深度学习算法和大数据分析&#xff0c;为程序员提供智能代码提…

权威的健康养生与医学基础知识科普学习信息汇总

目录 1 关于健康与食物营养的权威网址1.1 世界卫生组织&#xff08;World Health Organization: WHO&#xff09;1.2 美国国家卫生研究院 (National Institutes of Health: NIH)1.3 澳大利亚政府健康门户 (Healthdirect)1.4 国际食品信息委员会 (International Food Informatio…

如何使用宝塔面板配置Nginx反向代理WebSocket(wss)

本章教程&#xff0c;主要介绍一下在宝塔面板中如何配置websocket wss的具体过程。 目录 一、添加站点 二、申请证书 三、配置代理 1、增加配置内容 2、代理配置内容 三、注意事项 一、添加站点 二、申请证书 三、配置代理 1、增加配置内容 map $http_upgrade $connection_…

【GitHub项目推荐--不错的 Electron开源项目】【转载】

eDEX-UI&#xff1a;超炫酷终端工具 eDEX-UI 是一款跨平台基于 Electron 的炫酷终端工具。好莱坞级别的终端使用体验&#xff0c;拥有漂亮的启动动画、浮夸的音效&#xff0c;还能够直观地展示文件目录、系统资源、网络等信息。支持实时系统和网络监控、触摸式显示器&#xff…

AI Toolkit软件安装教程(附软件下载地址)

软件简介&#xff1a; 软件【下载地址】获取方式见文末。注&#xff1a;推荐使用&#xff0c;更贴合此安装方法&#xff01; AI Toolkit是一款卓越的人工智能软件&#xff0c;专为企业和个人提供一体化的解决方案&#xff0c;助力其工作流程高效运转。该软件套件融合了多种顶…

【公务员】图形推理技巧

位置规律 图形特征&#xff1a; 图形组成相同&#xff0c;优先考虑位置规律。 详细技巧&#xff1a; 样式规律 图形特征&#xff1a; 图形组成相似&#xff0c;优先考虑样式规律。 详细技巧&#xff1a; 形式技巧加法1、直接叠加2、☆规则运算&#xff1a;外轮廓与分割区域…

OpenCV笔记之图像处理中遮罩和掩模的关系

OpenCV笔记之图像处理中遮罩和掩模的关系 code review 文章目录 OpenCV笔记之图像处理中遮罩和掩模的关系1.遮罩详解遮罩的创建遮罩的应用遮罩的主要应用遮罩的类型如何创建遮罩遮罩在图像处理中的应用方式 2.遮罩和掩模的关系 1.遮罩详解 在图像处理中&#xff0c;遮罩&#…