微信小程序?qū)崿F(xiàn)的動態(tài)設置導航欄標題功能示例
更新時間：2019年01月31日 14:33:05 作者：Rattenking
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的動態(tài)設置導航欄標題功能,結(jié)合實例形式分析了微信小程序使用wx.setNavigationBarTitle接口動態(tài)設置導航欄標題的相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了微信小程序?qū)崿F(xiàn)的動態(tài)設置導航欄標題功能。分享給大家供大家參考，具體如下：
場景
當從一個分類列表頁面進入到一個詳情頁面的時候，由于這個詳情頁面是公用的，為了區(qū)分頁面，就會設置該頁面的導航用以區(qū)分。就需要開發(fā)者在頁面加載的時候進行動態(tài)設置導航標題！
實現(xiàn)API
wx.setNavigationBarTitle(OBJECT)
語法
wx.setNavigationBarTitle({
title: '當前頁面', //頁面標題
success: () => {}, //接口調(diào)用成功的回調(diào)函數(shù)
fail: () => {}, //接口調(diào)用失敗的回調(diào)函數(shù)
complete: () => {} //接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）
})
開發(fā)DEMO
list.wxml
1. 在navigator標簽的url設置兩個參數(shù)；
2. 一個分類ID—用于詳情頁面請求對應分類的詳細數(shù)據(jù)；
3. 一個分類名稱—用于本次博客的主要作用，設置導航欄標題。
<navigator url="../../pages/shopList/shopList?navId={{item.supplierTypeID}}&navName={{item.supplierTypeName}}">
<image class="rui-nav-icon" src="{{item.supplierTypePic}}"></image>
<text class='rui-nav-text'>{{item.supplierTypeName}}</text>
</navigator>
detail.js
1. 獲取URL傳遞到子頁面的參數(shù)—在onLoad函數(shù)opts.navName；
2. 三元表達式判斷opts.navName參數(shù)是否為空，如果為空直接設置為商鋪列表，否則進行拼接；
3. 用setNavigationBarTitle API實現(xiàn)導航標題的動態(tài)設置。
Page({
onLoad(opts){
// 設置導航欄為對應導航
wx.setNavigationBarTitle({
title: (opts.navName != '' ? opts.navName : '') + '商鋪列表'
})
}
})
實際應用效果圖
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
整理了一點IE和FF下的不同點，歡迎大家補充2009-04-04
純JavaScript實現(xiàn)櫻花飄落效果的示例代碼
這篇文章主要為大家詳細介紹了如何純JavaScript實現(xiàn)櫻花飄落效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-04-04
js字符串替換所有的指定字符或文字(推薦replaceAll方法)
要實現(xiàn)js字符串替換所有的某個字符，推薦大家使用replaceAll方法，默認不是所有瀏覽器都兼容，所以這里給出一個解決方案,需要的朋友可以參考下2014-07-07
JavaScript實現(xiàn)復制或剪切內(nèi)容到剪貼板功能的方法
這篇文章主要介紹了JavaScript實現(xiàn)復制或剪切內(nèi)容到剪貼板功能的方法,我們平時看到的網(wǎng)頁上很多一鍵復制功能就是如此實現(xiàn),需要的朋友可以參考下2016-05-05
javascript 函數(shù)調(diào)用規(guī)則
構(gòu)造器函數(shù)以大寫字母開頭是一個好的習慣,這可以作為一個提醒,讓你在調(diào)用的時候不要忘記前面的new運算符.2009-08-08
javascript實現(xiàn)圖片左右滾動效果【可自動滾動，有左右按鈕】
這篇文章主要介紹了javascript實現(xiàn)圖片左右滾動效果,可實現(xiàn)自動滾動,帶有左右按鈕功能,基于插件scrollPic.js實現(xiàn),附帶了相應的demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
javascript從右邊截取指定字符串的三種實現(xiàn)方法
這篇文章主要介紹了javascript從右邊截取指定字符串的三種實現(xiàn)方法。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了Chart.js功能與使用方法,結(jié)合實例形式分析了Chart.js功能、使用方法及操作注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了JavaScript分頁功能的實現(xiàn)方法,涉及javascript操作分頁的相關(guān)技巧,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了使用js實現(xiàn)一個簡單的滾動條過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09