当前位置:首页 » 《随便一记》 » 正文

【微信小程序】-- 页面导航 -- 编程式导航(二十三)

5 人参与  2023年03月06日 17:05  分类 : 《随便一记》  评论

点击全文阅读


请添加图片描述

? 所属专栏:【微信小程序开发教程】

? 作  者:我是夜阑的狗?

? 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询!

? 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 ? ? ?

文章目录

前言一、编程式导航1、导航到 tabBar 页面2、导航到非 tabBar 页面3、后退导航 总结


前言

  大家好,又见面了,我是夜阑的狗?,本文是专栏【微信小程序开发教程】专栏的第23篇文章;
  今天开始学习微信小程序的第十三天???,开启新的征程,记录最美好的时刻?,每天进步一点点。
  专栏地址:【微信小程序开发教程】, 此专栏是我是夜阑的狗微信小程序开发过程的总结,希望能够加深自己的印象,以及帮助到其他的小伙伴??。
  如果文章有什么需要改进的地方还请大佬不吝赐教??。


一、编程式导航

  前面已经介绍了页面导航 – 声明式导航,通过栗子学习了 tabBar 页面之间和 tabBar与普通页面之间的跳转,还有返回上一页的功能。接下来就来讲解一下另外一个页面导航–编程式导航。话不多说,让我们原文再续,书接上回吧。

请添加图片描述

1、导航到 tabBar 页面

  在小程序中,可以调用 wx.switchTab(Object object) 方法,可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下:

属性类型是否必选说明
urlstring需要跳转的 tabBar 页面的路径,路径后不能带参数
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

  通过栗子来学习一下,具体代码如下:

home.wxml

  创建按钮,通过按钮方式跳转到消息页面。

<button bindtap="gotoMessage">点我跳转消息页面</button>

home.js

  /**   * 通过编程式导航跳转到 tabBar 页面   */  gotoMessage(){    wx.switchTab({      url: '/pages/message/message',    })  },

  可以来看下运行效果:

请添加图片描述

2、导航到非 tabBar 页面

  小程序里想要跳转非 tabBar 页面,不能像前面那样调用 wx.switchTab(Object object) 方法,而是调用 wx.navigateTo(Object object) 方法来实现跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表
如下:

属性类型是否必选说明
urlstring需要跳转到的非 tabBar 页面的路径,路径后可以带参数
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

  下面通过栗子来学习一下,具体代码如下:

home.wxml

  创建按钮,通过按钮方式跳转到 info 页面。

<button bindtap="gotoInfo">点我跳转info页面</button>

home.js

  /**   * 通过编程式导航跳转到 info 页面   */  gotoInfo(){    wx.navigateTo({      url: '/pages/info/info',    })  },

  这样就可以通过按钮点击跳转到 info 页面,来看一下运行效果:

请添加图片描述

3、后退导航

  我们还可以调用 wx.navigateBack(Object object) 方法,可以返回上一页面或多级页面。其中 Object 参数对象可选的
属性列表如下:

属性类型默认值是否必选说明
deltanumber1需要跳转到的非 tabBar 页面的路径,路径后可以带参数
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

  下面通过栗子来学习一下,具体代码如下:

info.wxml

  创建按钮,通过按钮方式跳转到 info 页面。

<button bindtap="gotoBack">返回上一页</button>

info.js

  /**   * 编程式导航,返回到上一个页面   */  gotoBack(){    wx.navigateBack();  }

  这样就可以通过按钮点击跳转到 info 页面,来看一下运行效果:

请添加图片描述

  这里当返回层数只有一层的时候,delta 属性是可以省略的,当返回层数大于1时,可以指定该属性:

info.js

  gotoBack(){    wx.navigateBack({      delta : 1 // 返回层数    });  }

总结

  感谢观看,这里就是页面导航 – 编程式导航的介绍使用,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。? ? ?

在这里插入图片描述

  也欢迎你,关注我。? ? ?

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!? ? ? 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。?

更多专栏订阅:

? 【LeetCode题解(持续更新中)】? 【Java Web项目构建过程】? 【微信小程序开发教程】⚽ 【JavaScript随手笔记】? 【大数据学习笔记(华为云)】? 【程序错误解决方法(建议收藏)】? 【软件安装教程】



订阅更多,你们将会看到更多的优质内容!!


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/54032.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 前传程予夏沈昭序续集(程予夏沈昭序)终章阅读极简(程予夏沈昭序)
  • 厉总,夫人带三崽杀回来了(厉景深苏晚晴)全书免费_(厉景深苏晚晴)厉总,夫人带三崽杀回来了后续(厉景深苏晚晴)
  • 室友要往脸上打生长因子,我拍手叫好(徐甜甜崔哲华)_室友要往脸上打生长因子,我拍手叫好徐甜甜崔哲华
  • 为了给侄子治病,老公害我流产七次更新_陆寒川陆总林瑾无错版_小说后续在线阅读_无删减免费完结_
  • 填错志愿后,我成了活神仙章节目录_顾言姜澈林晓晓优质全文_小说后续在线阅读_无删减免费完结_
  • 沈亦初秦景泽后续(以后,她都不要再喜欢他了)(沈亦初秦景泽)整本畅享在线+无广告结局
  • 独家猎户夫君你轻点宠小说(云柔苏安)(猎户夫君你轻点宠)电子书畅享阅读
  • 全网首发容止洛云曦小说叫什么(他死后女帝火葬场了)(容止洛云曦)全书阅读纯净阅读
  • 周砚川战景熙小说章节目录+序章(离婚后,保镖前夫他成了财阀大佬)全书畅享在线
  • 碎骨惨死后,我与宿敌联手弑夫证道特别篇章节目录+章节前文(齐南韵柳苑云)TXT清爽版在线
  • 重生八零年代点天灯后,崇洋***的养妹疯了章节目录_肖颖芝江天肖星苒书荒_小说后续在线阅读_无删减免费完结_
  • 最新章节(姜小九徐琛)霸婚总裁小蛮妻:结局+番外精品选集附加章节列表

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1