微信小程式把玩(三十九)navigation API
阿新 • • 發佈:2019-02-10
演示效果也看到了小程式也就提供這幾個處理導航控制。值得注意的是只能同時導航五個頁面
主要屬性:
導航條一些方法
wx.setNavigationBarTitle(object) 設定導航條的Title
導航標題可以通過三種方式設定,第一種是通過全域性配置名字統一,第二種就是在page中新建個json檔案配置它會覆蓋全域性配置的title,第三種就是通過API設定。
wx.showNavigationBarLoading()設定在導航條上顯示Loading載入狀態
wx.hideNavigationBarLoading() 隱藏Loading載入狀態
導航檢視的一些方法
wx.navigateTo() 保留當前頁面進行跳轉,傳參時就像拼接GET引數一樣即可,程式碼中會有體現
wx.redirectTo() 銷燬當前頁面進行跳轉,
wx.navigateBack() 返回上一個頁面
wxml
<button type="primary" bindtap="setNavigationBarTitle">設定navigationBarTitle</button>
<button type="primary" bindtap="showNavigationBarLoading">設定navigationBarLoading載入狀態</button >
<button type="primary" bindtap="hiddenNavigationBarLoading">隱藏navigationBarLoading載入狀態</button>
<button type="warn" bindtap="navigateTo"> 保留當前頁跳轉</button>
<button type="warn" bindtap="redirectTo"> 不保留當前頁面跳轉</button>
<button type="warn" bindtap="navigateBack"> 退回到上一個頁面</button>
json
{
"navigationBarTitleText": "我是通過json配置的title"
}
js
//匯入另一個頁面
var file = '../audio/audio'
Page({
data:{
text:"Page navigation"
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉所帶來的引數
},
/**
* 設定NavigationTitle
*/
setNavigationBarTitle: function() {
wx.setNavigationBarTitle({
title: '我是通過API設定的NavigationBarTitle'
})
},
/**
* 設定載入狀態
*/
showNavigationBarLoading: function() {
wx.showNavigationBarLoading()
},
/**
* 隱藏載入狀態
*/
hiddenNavigationBarLoading: function() {
wx.hideNavigationBarLoading()
},
/**
* 保留當前Page跳轉
*/
navigateTo: function() {
wx.navigateTo({
//傳遞引數方式向get請求拼接引數一樣
url: file + '?phone=18939571&password=1992',
success: function(res) {
console.log(res)
},
fail: function(err) {
console.log(err)
}
})
},
/**
* 關閉當前頁面進行跳轉當前頁面會銷燬
*/
redirectTo: function() {
wx.redirectTo({
//傳遞引數方式向get請求拼接引數一樣
url: file + '?phone=189395719&password=1992'
})
},
/**
* 退回到上一個頁面
*/
navigateBack: function() {
wx.navigateBack()
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關閉
}
})