微信小程序页面导航

1.声明式导航

1.1声明式跳转Tab页面

1.1.1配置的Tab页面

 

 1.1.2页面跳转书写

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

 1.2.3页面展示

 

 

1.2声明式跳转到非Tab页面

1.2.1页面跳转代码

<navigator url="/pages/info/info" open-type="navigate">跳转非tab页面</navigator>

其实默认跳转的就是非Tab页面,可以简写成一下

<navigator url="/pages/info/info">跳转非tab页面</navigator>

1.2.2图片展示

 

1.3声明式导航传参

<navigator url="/pages/info/info?name=forever&age=18">跳转非tab页面</navigator>

注意:跳转tab页面不能传参,但是非Tab页面可以传递参数,微信开发左下角!

 

 或者在跳转后的页面

1.4后退导航

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

说明:delta代码后退的层数,默认为1。如果指定几层,直接输入数字即可 !

2.编程式导航

2.1编程式跳转Tab页面

2.1.1wxml

<view bindtap="change1">编程式导航1跳转Tab页面</view>

 2.1.2js文件

  change1(){
wx.switchTab({
//路径url: '/pages/home/home',  //成功的回调函数success:(res)=>{   
console.log(res);},//失败的回调函数fail:(error)=>{      console.log(error);}
})},

2.2编程式跳转到非Tabe页面

2.2.1wxml文件

<view bindtap="change2">编程式导航1跳转非Tab页面</view>

2.2.2js文件

  change2(){wx.navigateTo({url: '/pages/info/info',success:(res)=>{console.log(res);},fail:(error)=>{console.log(error);}})},

2.3编程式传参

2.3.1js文件

  change2(){wx.navigateTo({url: '/pages/info/info?name=forever&age=18',success:(res)=>{console.log(res);},fail:(error)=>{console.log(error);}})},

注意:还是不能将参数传递到Tab页面。

2.4后退导航

2.4.1wxml文件

<button bindtap="change1">编程式返回上一级</button>

2.4.2js文件

  change1(){wx.navigateBack({delta:2})},

3.部分源码展示

3.1wxml文件

<!--pages/message/message.wxml-->
<!-- 声明式导航 -->
<!-- 跳转tab页面 -->
<navigator url="/pages/home/home" open-type="switchTab">跳转tab页面</navigator>
<!-- 跳转非tab页面 -->
<!-- navigate默认可以不用写 -->
<navigator url="/pages/info/info?name=forever&age=18">跳转非tab页面</navigator>
<!-- delta默认值为1 --><!-- 编程式导航 -->
<view bindtap="change1">编程式导航1跳转Tab页面</view>
<view bindtap="change2">编程式导航2跳转非Tab页面</view>

3.2js文件

  change1(){
wx.switchTab({url: '/pages/home/home?name=forever&age=18',success:(res)=>{
console.log(res);},fail:(error)=>{console.log(error);}
})},change2(){wx.navigateTo({url: '/pages/info/info?name=forever&age=18',success:(res)=>{console.log(res);},fail:(error)=>{console.log(error);}})},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/1394.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nexus如何导入jar以及批量导入Maven的本地库目录

前言 本篇基于 Nexus 的版本是 nexus-3.55.0-01本方法适用Linux和WindowsWindows 需要安装Git , 使用Git Bash执行 Nexus上传依赖包的方式 上传依赖包到Nexus 服务器的方式有多种&#xff0c; 包含&#xff1a; 单个jar上传&#xff1a; 在Nexus管理台页面上传单个jar源码编…

大势智慧软硬件技术答疑第四期

1.重建大师是否支持bigmap绘制的范围线&#xff1f; 答&#xff1a;目前重建大师仅支持面格式的&#xff0c;bigmap的还没试验过&#xff0c;globalmapper或者arcgis是可以的。 2.为什么6.1建模的时候引擎一直是等待呢&#xff1f; 答&#xff1a;检查一下引擎面板引擎监控目录…

如何看待低级爬虫与高级爬虫?

爬虫之所以分为高级和低级&#xff0c;主要是基于其功能、复杂性和灵活性的差异。根据我总结大概有下面几点原因&#xff1a; 功能和复杂性&#xff1a;高级爬虫通常提供更多功能和扩展性&#xff0c;包括处理复杂页面结构、模拟用户操作、解析和清洗数据等。它们解决了开发者…

【STM32】keil MDK-Arm 5.38 功能详解

一、基本概念二、软件安装三、软件介绍3.1 Intro3.2 keil菜单栏3.21 file选项3.22 Edit 选项3.23 View选项3.24 Project选项3.25 Flash选项3.26 Debug选项3.27 Peripherals选项3.28 Tools选项3.29 SVCS选项3.2.10 Window选项3.2.11 Help选项 3.3 keil工具栏 四、设置与项目设置…

LITE TRANSFORMER WITH LONG-SHORT RANGE ATTENTION

1.摘要 在这篇论文中&#xff0c;我们提出了一种高效的移动NLP架构——Lite Transformer&#xff0c;以在边缘设备上部署移动NLP应用。Transformer已经成为自然语言处理&#xff08;例如机器翻译、问答系统&#xff09;中无处不在的技术&#xff0c;但要实现高性能需要大量计算…

numpy反向传播算法示例

numpy反向传播算法示例 数据 通过 scikit-learn 库提供的便捷工具生成 2000 个线性不可分的 2 分类数据集 按着7: 3比例切分训练集和测试集 backpropagation.py #!/usr/bin/env python # encoding: utf-8 """ desc: 反向传播算法 """impor…

树莓派 Raspberry Pi Zero 2W 安装默认系统时 ssh 登录并开启摄像头推流一段时间B

Raspberry Pi Zero 2W有点鸡肋&#xff0c;hdmi口用的microhdmi口&#xff0c;不是树莓派4b的minihdmi口&#xff0c;然后zero 2W也没有usb接口&#xff0c;有一个microusb安卓的otg接口&#xff0c;很烦&#xff0c;还好有wifi蓝牙模块&#xff0c;这样子还能ssh&#xff0c;不…

ASP.NET Core MVC 从入门到精通之缓存

随着技术的发展&#xff0c;ASP.NET Core MVC也推出了好长时间&#xff0c;经过不断的版本更新迭代&#xff0c;已经越来越完善&#xff0c;本系列文章主要讲解ASP.NET Core MVC开发B/S系统过程中所涉及到的相关内容&#xff0c;适用于初学者&#xff0c;在校毕业生&#xff0c…

青岛大学_王卓老师【数据结构与算法】Week03_07_线性表的链式表示和实现7_学习笔记

本文是个人学习笔记&#xff0c;素材来自青岛大学王卓老师的教学视频。 一方面用于学习记录与分享&#xff0c;另一方面是想让更多的人看到这么好的《数据结构与算法》的学习视频。 如有侵权&#xff0c;请留言作删文处理。 课程视频链接&#xff1a; 数据结构与算法基础–…

Ubuntu20.04.4安装ROS Noetic教程

一&#xff1a;配置系统软件源&#xff0c;软件源初始化 1&#xff1a;配置系统软件源 sudo cp /etc/apt/sources.list /etc/apt/sources.list.backup2&#xff1a;编辑系统软件源 sudo gedit /etc/apt/sources.list3&#xff1a;20.04LTS源码镜像复制到sources.list文件中 …

【线性代数】快速复习笔记

线性代数快速复习 行列式行列式的基础计算某行&#xff08;列加上或减去另一行&#xff08;列的几倍&#xff0c;行列式不变某行列乘k,等于k乘此行列式互换两行列&#xff0c;行列式变号 行列式的性质1 主对角线是X&#xff0c;其余是其他常数a2 范德蒙德行列式3 行列式加减法4…

如何排查 Electron V8 引发的内存 OOM 问题

经过长达大半年时间的崩溃治理后&#xff0c;基于 Electron 框架开发的新版 PC 淘宝直播推流客户端的稳定性终于赶超基于QT 框架开发的旧版本了。剩下的崩溃问题中有 40% 是跟内存 OOM 有关&#xff0c;其中 V8FatalErrorCallback js heap OOM 问题整整困扰了我一个多月。历经千…