柚子快報(bào)邀請(qǐng)碼778899分享：【小程序】頁(yè)面導(dǎo)航

http://yzkb.51969.com/

目錄

聲明式導(dǎo)航

導(dǎo)航到tabBar頁(yè)面

導(dǎo)航到非tabBar頁(yè)面?

后退導(dǎo)航

編程式導(dǎo)航

導(dǎo)航到tabBar頁(yè)面

導(dǎo)航到非tabBar頁(yè)面??

后退導(dǎo)航

聲明式導(dǎo)航傳參

編程式導(dǎo)航傳參

在onload中接收導(dǎo)航參數(shù)

下拉刷新事件

啟用下拉刷新

配置下拉刷新窗口的樣式

監(jiān)聽下拉刷新事件

停止下拉刷新效果?

上拉觸頂事件

在小程序中實(shí)現(xiàn)頁(yè)面導(dǎo)航的方式有兩種

聲明式導(dǎo)航

在頁(yè)面聲明一個(gè) 導(dǎo)航組件通過(guò)點(diǎn)擊組件實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)

導(dǎo)航到tabBar頁(yè)面

tabBar頁(yè)面指的是被配置為tabBar的頁(yè)面

在使用組件跳轉(zhuǎn)到指定的tabBar頁(yè)面時(shí)，需要指定url屬性和open-type屬性，其中：

url表示要跳轉(zhuǎn)的頁(yè)面的地址，必須以/開頭open-type表示要跳轉(zhuǎn)的方式，必須為switchTab

代碼示例：

導(dǎo)航到消息頁(yè)面

導(dǎo)航到非tabBar頁(yè)面?

非tabBar頁(yè)面指的是沒(méi)有被配置為tabBar的頁(yè)面

在使用組件跳轉(zhuǎn)到指定的非tabBar頁(yè)面時(shí)，需要指定url屬性和open-type屬性，其中：

url表示要跳轉(zhuǎn)的頁(yè)面的地址，必須以/開頭open-type表示要跳轉(zhuǎn)的方式，必須為navigate

代碼示例：

導(dǎo)航到消息頁(yè)面

注意 ：為了簡(jiǎn)便，在導(dǎo)航到非tabBar頁(yè)面的時(shí)候，open-type="navigate"屬性可以省略

后退導(dǎo)航

如果要后退到上一頁(yè)面或多級(jí)頁(yè)面，則需要指定open-type屬性和delta屬性，其中：?

open-type的值必須是navigateBack，表示要進(jìn)行后退導(dǎo)航delta的值必須是數(shù)字，表示要后退的層級(jí)

返回上一頁(yè)

編程式導(dǎo)航

調(diào)用小程序的導(dǎo)航API，實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)

導(dǎo)航到tabBar頁(yè)面

調(diào)用wx.switchTab(Object object)方法，可以跳轉(zhuǎn)tabBar頁(yè)面。其中Object參數(shù)對(duì)象的屬性列表如下：

屬性類型是否必選說(shuō)明urlstring是需要跳轉(zhuǎn)的tabBar頁(yè)面的路徑，路徑后面不能帶參數(shù)successfunction否接口調(diào)用成功后的回調(diào)函數(shù)failfunction否接口調(diào)用失敗后的回調(diào)函數(shù)completefunction否接口調(diào)用結(jié)束后的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

代碼示例：

跳轉(zhuǎn)到消息頁(yè)面?

?gotoMessage(){

????wx.switchTab({

??????url:?'/pages/message/message'

????})

??}

導(dǎo)航到非tabBar頁(yè)面??

調(diào)用wx.navigateTo(Object object)方法，可以跳轉(zhuǎn)非tabBar頁(yè)面。其中Object參數(shù)對(duì)象的屬性列表如下：

后退導(dǎo)航

調(diào)用wx.navigateBack(Object object)方法，可以返回上一頁(yè)面或多級(jí)頁(yè)面。其中Object參數(shù)對(duì)象的屬性列表如下：

聲明式導(dǎo)航傳參

navigator組件的url屬性用來(lái)指定將要跳轉(zhuǎn)的頁(yè)面的路徑，同時(shí)，路徑的后面還可以攜帶參數(shù)：

參數(shù)與路徑之間使用？分割參數(shù)鍵與參數(shù)值 = 相連不同參數(shù)用&分割

編程式導(dǎo)航傳參

與聲明式導(dǎo)航傳參類似，在url處添加參數(shù)即可

在onload中接收導(dǎo)航參數(shù)

在data定義一個(gè)query

?data:?{

????//導(dǎo)航傳遞過(guò)來(lái)的參數(shù)對(duì)象

????query:{}

??}

onLoad(options)?{

????this.setData({

??????query:options

????})

??}

下拉刷新事件

啟用下拉刷新

啟用下拉刷新有兩種方式：

1. 全局開啟下拉刷新

在app.json的window節(jié)點(diǎn)中，將enablePullDownRefresh設(shè)置為true

2. 局部開啟下拉刷新

在頁(yè)面的 .json 配置文件中，將enablePullDownRefresh設(shè)置為true

配置下拉刷新窗口的樣式

在全局或頁(yè)面的 .json配置文件中，通過(guò)backgroundColor 和?backgroundTextStyle來(lái)配置下拉刷新的樣式，其中：

backgroundColor用來(lái)配置下拉刷新窗口的背景顏色，僅支持16進(jìn)制的顏色值backgroundTextStyle用來(lái)配置下拉刷新loading的樣式，僅支持dark和light

監(jiān)聽下拉刷新事件

在 .js 文件中，通過(guò)?onPullDownRefresh()函數(shù)即可監(jiān)聽下拉刷新事件

?/**

???*?頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作

???*/

??onPullDownRefresh()?{

??},

停止下拉刷新效果?

在監(jiān)聽下拉事件函數(shù)中，添加如下代碼即可：

?onPullDownRefresh()?{

????????????????……

????wx.stopPullDownRefresh()

??},

上拉觸頂事件

在 .js 文件中，通過(guò)onReachBottom()即可監(jiān)聽上拉觸頂事件

柚子快報(bào)邀請(qǐng)碼778899分享：【小程序】頁(yè)面導(dǎo)航

http://yzkb.51969.com/

精彩鏈接