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

components/navigationBar/navigationBar.js

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

components/navigationBar/navigationBar.wxml

@@ -1,18 +1,31 @@
 <!-- components/navigationBar.wxml -->
 <view class="navigation-container" style="{{'height: ' + navigationBarAndStatusBarHeight}}">
-    <view class="navbg" wx:if="{{isShowBg && backgroundImage}}" style="background-image:url({{backgroundImage}}); background-size: 100% 100%; background-repeat: no-repeat; height: {{height}}">
-        <!-- 空白来占位状态栏 -->
-        <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>
+  <view class="navbg" wx:if="{{isShowBg && backgroundImage}}" style="background-image:url({{backgroundImage}}); background-size: 100% 100%; background-repeat: no-repeat; height: {{height}}">
+    <!-- 空白来占位状态栏 -->
+    <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 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" />