場景

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

實現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下載

遊戲列表