前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >「小程序JAVA实战」小程序导航组件(26)

「小程序JAVA实战」小程序导航组件(26)

作者头像
IT架构圈
发布2018-12-26 10:30:33
1K0
发布2018-12-26 10:30:33
举报
文章被收录于专栏:IT架构圈

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

navigate

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

  • navigate
  • redirect
  • navigateBack

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

  • 官方介绍

https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

  • 演示用例

page1.wxml

代码语言:javascript
复制
<!--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

代码语言:javascript
复制
<!--pages/page2/page2.wxml-->
<text>pages/page2/page2.wxml</text>

<navigator url='../page3/page3'>跳转到第三页</navigator>

<navigator open-type='navigateBack'>redirect类型点击无效,返回上一级</navigator>

page2.js

代码语言:javascript
复制
// 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

代码语言:javascript
复制
<!--pages/page3/page3.wxml-->
<text>pages/page3/page3.wxml</text>


<navigator open-type='navigateBack'>返回上一级</navigator>

<navigator open-type='navigateBack' delta='2'>返回上两级</navigator>

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-12-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 编程坑太多 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • navigate
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档