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

components/navigationBar/navigationBar.js

@@ -1,55 +1,60 @@
 // components/navigationBar.js
 Component({
-
+  /**
-    /**
+   * 组件的属性列表
-     * 组件的属性列表
+   */
-     */
+  properties: {
-    properties: {
+    title: {
-        title:{
+      type: String,
-            type: String,
+      value: "续期提醒",
-            value: '续期提醒'
+    },
-          },
+    backgroundImage: {
-          backgroundImage:{
+      type: String,
-            type: String,
+      value: "",
-            value: ''
+    },
-          },
+    isSowArrow: {
-          isSowArrow:{
+      type: Boolean,
-            type: Boolean,
+      value: false,
-            value: false
+    },
-          },
+    isShowBg: {
-          isShowBg:{
+      type: Boolean,
-            type: Boolean,
+      value: false,
-            value: false
-          },
-          height:{
-              type:String,
-              value:''
-          }
     },
+    height: {
+      type: String,
+      value: "",
+    },
+    titleAlign: {
+      type: String,
+      value: "center", // 默认居中对齐
+    },
+  },
 
-    /**
+  /**
-     * 组件的初始数据
+   * 组件的初始数据
-     */
+   */
-    data: {
+  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() {
+      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 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 style="{{'height: ' + statusBarHeight}}"></view>
-        <!-- 自定义导航栏 -->
+    <!-- 自定义导航栏 -->
-
+    <view class="navigation-bar" style=" height: {{navigationBarHeight}}">
-        <view class="navigation-bar" style=" height: {{navigationBarHeight}}">
+      <view class="arrow-content">
-            <view class="arrow-content">
+        <view class="arrow" wx:if="{{isSowArrow}}" bindtap="handleGoToBack"></view>
-                <view class="arrow" wx:if="{{isSowArrow}}" bindtap="handleGoToBack"></view>
+      </view>
-            </view>
+             <view class="navigation-title {{titleAlign === 'left' ? 'left-align' : 'center-align'}}" style="{{'line-height:' + navigationBarHeight}}">
-            <view class="navigation-title" style="{{'line-height:' + navigationBarHeight}}">{{title}}</view>
+         {{title}}
-        </view>
+       </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" />