微信小程序 navigation API實例詳解
演示效果也看到了小程序也就提供這幾個處理導航控制。值得注意的是只能同時導航五個頁面
主要屬性:
導航條一些方法
wx.setNavigationBarTitle(object) 設置導航條的Title
導航標題可以通過三種方式設置,第一種是通過全局配置名字統(tǒng)一,第二種就是在page中新建個json文件配置它會覆蓋全局配置的title,第三種就是通過API設置。
wx.showNavigationBarLoading()設置在導航條上顯示Loading加載狀態(tài)
wx.hideNavigationBarLoading() 隱藏Loading加載狀態(tài)
導航視圖的一些方法
wx.navigateTo() 保留當前頁面進行跳轉(zhuǎn),傳參時就像拼接GET參數(shù)一樣即可,代碼中會有體現(xiàn)
wx.redirectTo() 銷毀當前頁面進行跳轉(zhuǎn),
wx.navigateBack() 返回上一個頁面
wxml
<button type="primary" bindtap="setNavigationBarTitle">設置navigationBarTitle</button> <button type="primary" bindtap="showNavigationBarLoading">設置navigationBarLoading加載狀態(tài)</button> <button type="primary" bindtap="hiddenNavigationBarLoading">隱藏navigationBarLoading加載狀態(tài)</button> <button type="warn" bindtap="navigateTo"> 保留當前頁跳轉(zhuǎn)</button> <button type="warn" bindtap="redirectTo"> 不保留當前頁面跳轉(zhuǎn)</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為頁面跳轉(zhuǎn)所帶來的參數(shù) }, /** * 設置NavigationTitle */ setNavigationBarTitle: function() { wx.setNavigationBarTitle({ title: '我是通過API設置的NavigationBarTitle' }) }, /** * 設置加載狀態(tài) */ showNavigationBarLoading: function() { wx.showNavigationBarLoading() }, /** * 隱藏加載狀態(tài) */ hiddenNavigationBarLoading: function() { wx.hideNavigationBarLoading() }, /** * 保留當前Page跳轉(zhuǎn) */ navigateTo: function() { wx.navigateTo({ //傳遞參數(shù)方式向get請求拼接參數(shù)一樣 url: file + '?phone=18939571&password=1992', success: function(res) { console.log(res) }, fail: function(err) { console.log(err) } }) }, /** * 關(guān)閉當前頁面進行跳轉(zhuǎn)當前頁面會銷毀 */ redirectTo: function() { wx.redirectTo({ //傳遞參數(shù)方式向get請求拼接參數(shù)一樣 url: file + '?phone=189395719&password=1992' }) }, /** * 退回到上一個頁面 */ navigateBack: function() { wx.navigateBack() }, onReady:function(){ // 頁面渲染完成 }, onShow:function(){ // 頁面顯示 }, onHide:function(){ // 頁面隱藏 }, onUnload:function(){ // 頁面關(guān)閉 } })
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
js前端實現(xiàn)word?excel?pdf?ppt?mp4圖片文本等文件預覽
這篇文章主要為大家介紹了js前端實現(xiàn)word?excel?pdf?ppt?mp4圖片文本等文件預覽示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07