转自: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. BZOJ2595 Wc2008 游览计划 【斯坦纳树】【状压DP】*

    BZOJ2595 Wc2008 游览计划 Description Input 第一行有两个整数,N和 M,描述方块的数目. 接下来 N行, 每行有 M 个非负整数, 如果该整数为 0, 则该方块为一个 ...

  2. Codeforces 25E Test 【Hash】

    Codeforces 25E Test E. Test Sometimes it is hard to prepare tests for programming problems. Now Bob ...

  3. CCF 集合竞价

    题目: 问题描述 某股票交易所请你编写一个程序,根据开盘前客户提交的订单来确定某特定股票的开盘价和开盘成交量. 该程序的输入由很多行构成,每一行为一条记录,记录可能有以下几种: 1. buy p s ...

  4. Cockpit 服务化管理工具

    Cockpit 是红帽开发的网页版图像化服务管理工具,优点是无需中间层,且可以管理多种服务. 根据其项目主站描述,Cockpit 有如下特点: 从易用性考虑设计,方便管理人员使用,而不是仅仅的终端命令 ...

  5. Træfɪk 服务发现解决方案

    Træfɪk is a modern HTTP reverse proxy and load balancer made to deploy microservices with ease. It s ...

  6. baidu手机输入法:邂逅"吹神"的声场漫游

        "十年,好久不见,兄妹,所有还好?年月如歌,你的背包.却仍然没有筛选.装满红玫瑰.人来人往,爱情搬运,纵使我成了K歌之王.也谢谢你.依然让我的全世界失眠. 孤单患者.不如不见,不要说 ...

  7. python 有关引用的一些问题

    python 有关引用的一些问题 print id.__doc__ ​ id(object) -> integer Return the identity of an object. This ...

  8. torcs代码

    /** Info returned by driver during the race */ typedef struct { tdble steer; /**< Steer command [ ...

  9. bzoj 1101 [POI2007]Zap——反演

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1101 #include<cstdio> #include<cstring& ...

  10. (转)如何制作nodejs,npm “绿色”安装包

      摘自:http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=8625039&id=3817492       由于公司环境 ...