first commit

miniprogram/components/navigation-bar/navigation-bar.js

@@ -0,0 +1,105 @@
+"use strict";
+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();
+            wx.getSystemInfo({
+                success: (res) => {
+                    const isAndroid = res.platform === 'android';
+                    const isDevtools = res.platform === 'devtools';
+                    this.setData({
+                        ios: !isAndroid,
+                        innerPaddingRight: `padding-right: ${res.windowWidth - rect.left}px`,
+                        leftWidth: `width: ${res.windowWidth - rect.left}px`,
+                        safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${res.safeArea.top}px); padding-top: ${res.safeArea.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 }, {});
+        }
+    },
+});