uni-app動態修改頂部導航欄標題

  • 2020 年 6 月 13 日
  • 筆記

動態修改頂部導航欄標題有兩種方法
方式一、使用自定義到導航欄,覆蓋原生導航欄

缺點:
自定義到導航欄性能遠遠不如原生導航欄,手機頂部狀態欄區域會被頁面內容覆蓋,這是因為窗體是沉浸式的原因,即全屏可寫
內容;如果存在下拉刷新,下拉刷新會從導航欄上面開始下拉加載,解決方案可採用offset偏移量,自定義下拉圈出現的位置
優點:可根據實際業務場景,開發符合自己UI的樣式
1、會覆蓋手機屏幕狀態欄,解決方法:
1.1、要把狀態欄的位置從前景部分讓出來,可寫一個佔位符div

<view class="status_bar">
    <!-- 這裡是狀態欄 -->
</view>
<style>
  .status_bar {
      height: var(--status-bar-height);
      width: 100%;
  }
</style>

2、需要配置pages.json裏面的pages下style下navigationStyle:false
2.2、在指定頁面用自定義到導航欄
2.3、代碼如下:

<view class="status_bar">
    <!-- 這裡是狀態欄 -->
</view>
<view class="header">
    <view @click="backButton" class="back-image-box">
        <image class="back-image" src="/static/img/back.png" mode=""></image>
    </view>
    <view class="title">{{info.title}}</view>
    <view class="share-image-box">
        <image @click="FenXiang()" class="share-image" src="/static/img/share.png" mode=""></image>
    </view>
</view>
<style  scoped lang="scss">
    .header{
        position: fixed;
        top: var(--status-bar-height);
        left: 0;
        z-index: 9;
        height: 90rpx;
        width: 100%;
        z-index: 100;
        display: flex;
        justify-content: space-between;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        background: -webkit-linear-gradient(left,#f53a3a,#f53b3a,#f64f46);
        .back-image-box{
            display: flex;
            justify-content: flex-start;
            height: 90rpx;
            .back-image{
                width: 50rpx;
                height: 50rpx;
                padding-top: 16rpx;
                padding-left: 16rpx;
            }
        }
        .title{
            display: flex;
            justify-content: center;
            padding-top: 20rpx;
            font-size: 32rpx;
            color: #FFFFFF;
            overflow: hidden;
        }
        .share-image-box{
            display: flex;
            justify-content: flex-end;
            padding-left: 20rpx;
            height: 90rpx;
            .share-image{
                width: 50rpx;
                height: 50rpx;
                padding-top: 16rpx;
                padding-right: 30rpx;
            }
        }
    }
</style>

如果var(–status-bar-height)沒有用或者報錯,請引入uni.scss,uni.scss文件可以創建一個hello-uniapp,從裏面拷貝過來
注意事項 //uniapp.dcloud.io/collocation/pages?id=customnav,訪問此處鏈接查看

方法二、
使用原生導航欄,通過API 動態修改
pages.json 裏面的配置原始的值不要改變
如果需要在頁面進入時設置標題,可以在onReady內執行,以避免被框架內的修改所覆蓋。如果必須在onShow內執行需要延遲一小段時間
在指定頁面使用如下代碼:

uni.setNavigationBarTitle({
    title: '新的標題'
});
uni.setNavigationBarColor({
    frontColor: '#000000', //前景顏色值,包括按鈕、標題、狀態欄的顏色,僅支持 #ffffff 和 #000000
    backgroundColor: '#F0AD4E', //背景顏色值,有效值為十六進制顏色
    animation: {  //動畫效果
        duration: 400,
        timingFunc: 'easeIn'
    }
})

文檔地址://uniapp.dcloud.io/api/ui/navigationbar?id=setnavigationbartitle