演示效果也看到了小程序也就提供這幾個處理導航控制。值得注意的是只能同時導航五個頁面
主要屬性:
導航條一些方法
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(){ // 頁面關閉 }})
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
新聞熱點
疑難解答