Initial Commit

components/navigation-bar/navigation-bar.js

@@ -0,0 +1,118 @@
+Component({
+  options: {
+    multipleSlots: true // 在组件定义时的选项中启用多slot支持
+  },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    extClass: {
+      type: String,
+      value: ''
+    },
+    title: {
+      type: String,
+      value: ''
+    },
+    background: {
+      type: String,
+      value: ''
+    },
+    color: {
+      type: String,
+      value: ''
+    },
+    back: {
+      type: Boolean,
+      value: true
+    },
+    loading: {
+      type: Boolean,
+      value: false
+    },
+    homeButton: {
+      type: Boolean,
+      value: false,
+    },
+    animated: {
+      // 显示隐藏的时候opacity动画效果
+      type: Boolean,
+      value: true
+    },
+    show: {
+      // 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
+      type: Boolean,
+      value: true,
+      observer: '_showChange'
+    },
+    // back为true的时候，返回的页面深度
+    delta: {
+      type: Number,
+      value: 1
+    },
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    displayStyle: ''
+  },
+  lifetimes: {
+    attached() {
+      const rect = wx.getMenuButtonBoundingClientRect()
+      
+      // 使用新的API，提供兜底方案
+      let platform, windowWidth, safeArea;
+      try {
+        const deviceInfo = wx.getDeviceInfo();
+        platform = deviceInfo.platform;
+        const windowInfo = wx.getWindowInfo();
+        windowWidth = windowInfo.windowWidth;
+        safeArea = windowInfo.safeArea || {};
+      } catch (error) {
+        console.warn('使用新API失败，回退到旧API:', error);
+        const systemInfo = wx.getSystemInfoSync();
+        platform = systemInfo.platform;
+        windowWidth = systemInfo.windowWidth;
+        safeArea = systemInfo.safeArea || {};
+      }
+      
+      const isAndroid = platform === 'android'
+      const isDevtools = platform === 'devtools'
+      const { top = 0, bottom = 0 } = safeArea
+      this.setData({
+        ios: !isAndroid,
+        innerPaddingRight: `padding-right: ${windowWidth - rect.left}px`,
+        leftWidth: `width: ${windowWidth - rect.left}px`,
+        safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${top}px); padding-top: ${top}px` : ``
+      })
+    },
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    _showChange(show) {
+      const animated = this.data.animated
+      let displayStyle = ''
+      if (animated) {
+        displayStyle = `opacity: ${show ? '1' : '0'
+          };transition:opacity 0.5s;`
+      } else {
+        displayStyle = `display: ${show ? '' : 'none'}`
+      }
+      this.setData({
+        displayStyle
+      })
+    },
+    back() {
+      const data = this.data
+      if (data.delta) {
+        wx.navigateBack({
+          delta: data.delta
+        })
+      }
+      this.triggerEvent('back', { delta: data.delta }, {})
+    }
+  },
+})