微信小程序 navigation API實(shí)例詳解
演示效果也看到了小程序也就提供這幾個(gè)處理導(dǎo)航控制。值得注意的是只能同時(shí)導(dǎo)航五個(gè)頁(yè)面
主要屬性:
導(dǎo)航條一些方法
wx.setNavigationBarTitle(object) 設(shè)置導(dǎo)航條的Title
導(dǎo)航標(biāo)題可以通過(guò)三種方式設(shè)置,第一種是通過(guò)全局配置名字統(tǒng)一,第二種就是在page中新建個(gè)json文件配置它會(huì)覆蓋全局配置的title,第三種就是通過(guò)API設(shè)置。
wx.showNavigationBarLoading()設(shè)置在導(dǎo)航條上顯示Loading加載狀態(tài)
wx.hideNavigationBarLoading() 隱藏Loading加載狀態(tài)
導(dǎo)航視圖的一些方法
wx.navigateTo() 保留當(dāng)前頁(yè)面進(jìn)行跳轉(zhuǎn),傳參時(shí)就像拼接GET參數(shù)一樣即可,代碼中會(huì)有體現(xiàn)
wx.redirectTo() 銷毀當(dāng)前頁(yè)面進(jìn)行跳轉(zhuǎn),
wx.navigateBack() 返回上一個(gè)頁(yè)面
wxml
<button type="primary" bindtap="setNavigationBarTitle">設(shè)置navigationBarTitle</button> <button type="primary" bindtap="showNavigationBarLoading">設(shè)置navigationBarLoading加載狀態(tài)</button> <button type="primary" bindtap="hiddenNavigationBarLoading">隱藏navigationBarLoading加載狀態(tài)</button> <button type="warn" bindtap="navigateTo"> 保留當(dāng)前頁(yè)跳轉(zhuǎn)</button> <button type="warn" bindtap="redirectTo"> 不保留當(dāng)前頁(yè)面跳轉(zhuǎn)</button> <button type="warn" bindtap="navigateBack">退回到上一個(gè)頁(yè)面</button>
json
{
"navigationBarTitleText": "我是通過(guò)json配置的title"
}
js
//導(dǎo)入另一個(gè)頁(yè)面 var file = '../audio/audio' Page({ data:{ text:"Page navigation" }, onLoad:function(options){ // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù) }, /** * 設(shè)置NavigationTitle */ setNavigationBarTitle: function() { wx.setNavigationBarTitle({ title: '我是通過(guò)API設(shè)置的NavigationBarTitle' }) }, /** * 設(shè)置加載狀態(tài) */ showNavigationBarLoading: function() { wx.showNavigationBarLoading() }, /** * 隱藏加載狀態(tài) */ hiddenNavigationBarLoading: function() { wx.hideNavigationBarLoading() }, /** * 保留當(dāng)前Page跳轉(zhuǎn) */ navigateTo: function() { wx.navigateTo({ //傳遞參數(shù)方式向get請(qǐng)求拼接參數(shù)一樣 url: file + '?phone=18939571&password=1992', success: function(res) { console.log(res) }, fail: function(err) { console.log(err) } }) }, /** * 關(guān)閉當(dāng)前頁(yè)面進(jìn)行跳轉(zhuǎn)當(dāng)前頁(yè)面會(huì)銷毀 */ redirectTo: function() { wx.redirectTo({ //傳遞參數(shù)方式向get請(qǐng)求拼接參數(shù)一樣 url: file + '?phone=189395719&password=1992' }) }, /** * 退回到上一個(gè)頁(yè)面 */ navigateBack: function() { wx.navigateBack() }, onReady:function(){ // 頁(yè)面渲染完成 }, onShow:function(){ // 頁(yè)面顯示 }, onHide:function(){ // 頁(yè)面隱藏 }, onUnload:function(){ // 頁(yè)面關(guān)閉 } })
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- 微信小程序收貨地址API兼容低版本解決方法
- 微信小程序訪問(wèn)豆瓣電影api的實(shí)現(xiàn)方法
- 微信小程序通過(guò)api接口將json數(shù)據(jù)展現(xiàn)到小程序示例
- 微信小程序 獲取設(shè)備信息 API實(shí)例詳解
- 微信小程序如何調(diào)用json數(shù)據(jù)接口并解析
- 微信小程序調(diào)用天氣接口并且渲染在頁(yè)面過(guò)程詳解
- 微信小程序調(diào)用攝像頭隱藏式拍照功能
- 微信小程序調(diào)用PHP后臺(tái)接口 解析純html文本
- 微信小程序 wx.request(接口調(diào)用方式)詳解及實(shí)例
- 微信小程序如何調(diào)用圖片接口API并居中顯示
相關(guān)文章
微信小程序 基礎(chǔ)組件與導(dǎo)航組件詳細(xì)介紹
這篇文章主要介紹了微信小程序 基礎(chǔ)組件與導(dǎo)航組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2017-02-02項(xiàng)目中使用TypeScript的TodoList實(shí)例詳解
這篇文章主要為大家介紹了項(xiàng)目中使用TypeScript的TodoList實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01js前端實(shí)現(xiàn)word?excel?pdf?ppt?mp4圖片文本等文件預(yù)覽
這篇文章主要為大家介紹了js前端實(shí)現(xiàn)word?excel?pdf?ppt?mp4圖片文本等文件預(yù)覽示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07js封裝一個(gè)websocket實(shí)現(xiàn)及使用詳解
這篇文章主要為大家介紹了js封裝一個(gè)websocket實(shí)現(xiàn)示例及使用方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07