自定义导航栏组件标题可居中居左

components/navigationBar/navigationBar.js

@@ -1,30 +1,33 @@
 // components/navigationBar.js
 Component({
-
   /**
    * 组件的属性列表
    */
   properties: {
-        title:{
+    title: {
       type: String,
-            value: '续期提醒'
+      value: "续期提醒",
     },
-          backgroundImage:{
+    backgroundImage: {
       type: String,
-            value: ''
+      value: "",
     },
-          isSowArrow:{
+    isSowArrow: {
       type: Boolean,
-            value: false
+      value: false,
     },
-          isShowBg:{
+    isShowBg: {
       type: Boolean,
-            value: false
+      value: false,
+    },
+    height: {
+      type: String,
+      value: "",
+    },
+    titleAlign: {
+      type: String,
+      value: "center", // 默认居中对齐
     },
-          height:{
-              type:String,
-              value:''
-          }
   },
 
   /**
@@ -32,24 +35,26 @@ Component({
    */
   data: {
     // 状态栏高度
-        statusBarHeight: wx.getStorageSync('statusBarHeight') + 'px',
+    statusBarHeight: wx.getStorageSync("statusBarHeight") + "px",
     // 导航栏高度
-        navigationBarHeight: wx.getStorageSync('navigationBarHeight') + 'px',
+    navigationBarHeight: wx.getStorageSync("navigationBarHeight") + "px",
     // 胶囊按钮高度
-        menuButtonHeight: wx.getStorageSync('menuButtonHeight') + 'px',
+    menuButtonHeight: wx.getStorageSync("menuButtonHeight") + "px",
     // 导航栏和状态栏高度
-        navigationBarAndStatusBarHeight: wx.getStorageSync('statusBarHeight') + wx.getStorageSync('navigationBarHeight') + 'px'
-
+    navigationBarAndStatusBarHeight:
+      wx.getStorageSync("statusBarHeight") +
+      wx.getStorageSync("navigationBarHeight") +
+      "px",
   },
 
   /**
    * 组件的方法列表
    */
   methods: {
-        handleGoToBack(){
+    handleGoToBack() {
       wx.navigateBack({
-              delta: 1
-            })
-          }
-    }
-})
+        delta: 1,
+      });
+    },
+  },
+});

components/navigationBar/navigationBar.wxml

@@ -4,15 +4,28 @@
     <!-- 空白来占位状态栏 -->
     <view style="{{'height: ' + statusBarHeight}}"></view>
     <!-- 自定义导航栏 -->
-
     <view class="navigation-bar" style=" height: {{navigationBarHeight}}">
       <view class="arrow-content">
         <view class="arrow" wx:if="{{isSowArrow}}" bindtap="handleGoToBack"></view>
       </view>
-            <view class="navigation-title" style="{{'line-height:' + navigationBarHeight}}">{{title}}</view>
+             <view class="navigation-title {{titleAlign === 'left' ? 'left-align' : 'center-align'}}" style="{{'line-height:' + navigationBarHeight}}">
+         {{title}}
+       </view>
+    </view>
+  </view>
+  <view class="navbg" wx:else>
+    <!-- 空白来占位状态栏 -->
+    <view style="{{'height: ' + statusBarHeight}}"></view>
+    <!-- 自定义导航栏 -->
+    <view class="navigation-bar" style=" height: {{navigationBarHeight}}">
+      <view class="arrow-content">
+        <view class="arrow" wx:if="{{isSowArrow}}" bindtap="handleGoToBack"></view>
+      </view>
+      <view class="navigation-title {{titleAlign === 'left' ? 'left-align' : 'center-align'}}" style="{{'line-height:' + navigationBarHeight}}">
+        {{title}}
+      </view>
     </view>
   </view>
-
 </view>
 <!-- 空白占位fixed空出的位置 -->
 <view style="{{'height: ' + navigationBarAndStatusBarHeight}}"></view>

components/navigationBar/navigationBar.wxss

@@ -41,13 +41,23 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.arrow-content{
+
+.center-align {
+    text-align: center;
+}
+
+.left-align {
+    text-align: left;
+}
+
+.arrow-content {
     position: absolute;
     left: 40rpx;
     z-index: 999;
     display: flex;
     align-items: center;
-  }
+}
+
 .arrow {
     width: 18rpx;
     height: 18rpx;

subpages/index/renewalApplication/renewalApplication.wxml

@@ -1,5 +1,5 @@
 <view class="cont">
-      <navigationBar title="续期申请" isSowArrow="true" isShowBg="true" backgroundImage="/images/bg.png" height="200px"></navigationBar>
+      <navigationBar title="续期申请" isSowArrow isShowBg backgroundImage="/images/bg.png" height="200px"  titleAlign="center"></navigationBar>
 
     <view class="tip-cont">
         <van-image width="72" height="72" src="/images/mine/md-restore.png" custom-class="cusImage" />