微信小程序----動態設置導航欄標題


場景

當從一個分類列表頁面進入到一個詳情頁面的時候,由於這個詳情頁面是公用的,為了區分頁面,就會設置該頁面的導航用以區分。就需要開發者在頁面加載的時候進行動態設置導航標題!


實現API

wx.setNavigationBarTitle(OBJECT)


語法

wx.setNavigationBarTitle({
  title: '當前頁面',    //頁面標題
  success: () => {},   //接口調用成功的回調函數
  fail: () => {},      //接口調用失敗的回調函數
  complete: () => {}   //接口調用結束的回調函數(調用成功、失敗都會執行)
})

開發DEMO

list.wxml

  1. 在navigator標簽的url設置兩個參數;
  2. 一個分類ID—用於詳情頁面請求對應分類的詳細數據;
  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傳遞到子頁面的參數—在onLoad函數opts.navName;
  2. 三元表達式判斷opts.navName參數是否為空,如果為空直接設置為商鋪列表,否則進行拼接;
  3. 用setNavigationBarTitle API實現導航標題的動態設置。

Page({ onLoad(opts){ // 設置導航欄為對應導航 wx.setNavigationBarTitle({ title: (opts.navName != '' ? opts.navName : '') + '商鋪列表' })
    }
})

實際應用效果圖

動態設置導航標題

DEMO下載

我的博客,歡迎交流!

我的CSDN博客,歡迎交流!

微信小程序專欄

前端筆記專欄

微信小程序實現部分高德地圖功能的DEMO下載

微信小程序實現MUI的部分效果的DEMO下載

微信小程序實現MUI的GIT項目地址

微信小程序實例列表

前端筆記列表

游戲列表


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM