「小程序JAVA實戰」小程序導航組件（26）

來說下 ，小程序的導航組件。源碼：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這個標簽還是特別重要的，因為在實際開發過程中，頁面跳轉還是非常的多的。

>>原創文章，歡迎轉載。轉載請注明：轉載自IT人故事會，謝謝！
>>原文鏈接地址：「小程序JAVA實戰」小程序導航組件（26）