转自:https://idig8.com/2018/08/19/xiaochengxujavashizhanxiaochengxudaohangzujian26/

来说下 ,小程序的导航组件。源码:https://github.com/limingios/wxProgram.git 中的No.13

navigate

实际使用中主要分为三种类型

  • navigate
  • redirect
  • navigateBack

当页面一直一直往下跳的时候,可以逐级返回。

  • 官方介绍
    >https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

  • 演示用例

page1.wxml

<!--pages/page1/page1.wxml-->
<text>pages/page1/page1.wxml</text> <navigator url='../page2/page2'>跳转到第二页</navigator>
<navigator url='../page3/page3'>跳转到第三页</navigator> <navigator url='../page2/page2' open-type='redirect'>redirect方式跳转到第二页</navigator> <navigator url='../page2/page2?name1=个人主页:idig.com&name2=公众号:编程坑太多'> 传递参数的跳转到第二页</navigator>

page2.wxml

<!--pages/page2/page2.wxml-->
<text>pages/page2/page2.wxml</text> <navigator url='../page3/page3'>跳转到第三页</navigator> <navigator open-type='navigateBack'>redirect类型点击无效,返回上一级</navigator>

page2.js

// pages/page2/page2.js
Page({ /**
* 页面的初始数据
*/
data: { }, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options);
}, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function () { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function () { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { }
})

page3.html

<!--pages/page3/page3.wxml-->
<text>pages/page3/page3.wxml</text> <navigator open-type='navigateBack'>返回上一级</navigator> <navigator open-type='navigateBack' delta='2'>返回上两级</navigator>

PS:这个就是页面跳转的实践,navigate这个标签还是特别重要的,因为在实际开发过程中,页面跳转还是非常的多的。

「小程序JAVA实战」小程序导航组件(26)的更多相关文章

  1. 「小程序JAVA实战」小程序首页视频(49)

    转自:https://idig8.com/2018/09/21/xiaochengxujavashizhanxiaochengxushouyeshipin48/ 视频显示的内容是视频的截图,用户的头像 ...

  2. 「小程序JAVA实战」小程序的flex布局(22)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧.源码:ht ...

  3. 「小程序JAVA实战」小程序的留言和评价功能(70)

    转自:https://idig8.com/2018/10/28/xiaochengxujavashizhanxiaochengxudeliuyanhepingjiagongneng69/ 目前小程序这 ...

  4. 「小程序JAVA实战」小程序的举报功能开发(68)

    转自:https://idig8.com/2018/09/25/xiaochengxujavashizhanxiaochengxudeweixinapicaidancaozuo66-2/ 通过点击举报 ...

  5. 「小程序JAVA实战」小程序的个人信息作品,收藏,关注(66)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudegerenxinxizuopinshoucangguanzhu65 ...

  6. 「小程序JAVA实战」小程序的关注功能(65)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeguanzhugongneng64/ 在个人页面,根据发布者个人和 ...

  7. 「小程序JAVA实战」小程序的视频点赞功能开发(62)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeshipindianzangongnengkaifa61/ 视频点 ...

  8. 「小程序JAVA实战」小程序的springboot后台拦截器(61)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudespringboothoutailanjieqi60/ 之前咱们把 ...

  9. 「小程序JAVA实战」小程序视频封面处理(48)

    转自:https://idig8.com/2018/09/16/xiaochengxujavashizhanxiaochengxushipinfengmianchuli47/ 截图这块,在微信小程序工 ...

随机推荐

  1. BZOJ4292 PA2015 Równanie 【暴力水题】

    BZOJ4292 PA2015 Równanie Description 对于一个正整数n,定义f(n)为它十进制下每一位数字的平方的和.现在给定三个正整数k,a,b,请求出满足a<=n< ...

  2. BZOJ4033 HAOI2015 树上染色 【树上背包】

    BZOJ4033 HAOI2015 树上染色 Description 有一棵点数为N的树,树边有边权.给你一个在0~N之内的正整数K,你要在这棵树中选择K个点,将其染成黑色,并将其他的N-K个点染成白 ...

  3. 让控制台支持 ANSI 转义序列,输出下划线、修改颜色或其他控制

    各种操作系统的控制台都支持 ANSI 转义序列(ANSI Escape Code).使用转义序列,可以对控制台进行很多额外的定制,例如修改颜色.修改标题栏,将文字添加下划线等. 当然,.NET 已经帮 ...

  4. 使 32 位程序使用大于 2GB 的内存

    不管在 32 位 Windows 上还是在 64 位 Windows 上,32 位的应用程序都只能使用最大 2GB 的内存,这是我们司空见惯的一个设定.但其实 Windows 提供了一些方法让我们打破 ...

  5. Spring-Java事物回滚失效处理

    spring-Java事物回滚失效处理最近在做项目中,无意间发现有个类在抛事物回滚操作,数据也正常的插入到数据库当中了,于是仔细查看看一下具体原因. 一切还是要从Java的检查型异常和非检查型异常说起 ...

  6. java中线程安全问题

    在java中单线程和多线程是什么意思,他们有什么区别,分别的作用是什么? 在一个程序中,这些独立运行的程序片断叫作“线程”(Thread),利用它编程的概念就叫作“多线程处理”.多线程处理一个常见的例 ...

  7. 实例-系数可配置的fir滤波器

  8. 【java基础】Java运算符优先级

    Java运算符优先级 序列号 符号 名称 结合性(与操作数) 目数 说明 1 . 点 从左到右 双目 ( ) 圆括号 从左到右   [ ] 方括号 从左到右   2 + 正号 从右到左 单目 - 负号 ...

  9. c++深拷贝/浅拷贝

    拷贝构造函数,是一种特殊的构造函数,它由编译器调用来完成一些基于同一类的其他对象的构建及初始化.其唯一的参数(对象的引用)是不可变的(const类型).此函数经常用在函数调用时用户定义类型的值传递及返 ...

  10. xshell 提示 继续使用此程序必须应用到最新的更新或使用新版本 的解决方案

    当打开正在使用的xshell后,提示“继续使用此程序必须应用到最新的更新或使用新版本 ”  是因为我们正在使用的是xshell5 版本,需要我们再安装一个xshell6 版本 我个人使用的是家庭/教育 ...