jmash-core-mp 0.1.76 → 0.1.78

package/src/components/common/jmash-top-navigation.mpx

@@ -1,204 +1,204 @@
-<template>
-    <!-- 顶部导航栏（支持滚动变色效果） -->
-    <view class="nav-bar" style="background-color: {{ style.color || (indexBg ? 'transparent' : '#ffffff' ) }};">
-        <view class="nav-bar-content"
-            style="color: {{ currentTitleColor }}; height: {{ style.height }}px;padding-top: {{ style.paddingTop }}px;">
-            <!-- 左侧区域 -->
-            <view class="nav-bar-left">
-                <view class="left-icon" wx:if="{{ leftIcon }}"
-                    bind:tap="{{ leftIcon === 'home' ? 'handleIndex' : 'handleReturn' }}">
-                    <cube-icon type="{{ leftIcon === 'home' ? 'home' : 'back' }}" size="30rpx"
-                        color="{{ currentTitleColor }}" />
-                </view>
-                <slot name="left" />
-            </view>
-
-            <!-- 标题区域 -->
-            <view class="nav-bar-title" wx:if="{{ title }}">
-                {{ title }}
-            </view>
-
-            <!-- 右侧区域 -->
-            <view class="nav-bar-right">
-                <slot name="right" />
-            </view>
-        </view>
-    </view>
-</template>
-
-<script lang="ts">
-import mpx, { createComponent, ref } from "@mpxjs/core";
-
-createComponent({
-    options: {
-        multipleSlots: true,
-    },
-    properties: {
-        // 左侧按钮（'home':首页图标, 'back':返回图标，不传或空字符串不显示）
-        leftIcon: {
-            type: String,
-            value: "",
-        },
-        // 标题
-        title: {
-            type: String,
-            value: "",
-        },
-        // 是否首页导航栏透明背景
-        indexBg: {
-            type: Boolean,
-            value: false,
-        },
-        // 是否开启字体渐变 白-黑（滚动变色时）
-        isGradient: {
-            type: Boolean,
-            value: false
-        },
-        // 字体的颜色
-        titleColor: {
-            type: String,
-            value: "#333",
-        }
-    },
-    setup() {
-        // 样式控制对象
-        const style = ref({
-            // 导航栏的高度
-            height: mpx.getMenuButtonBoundingClientRect().bottom - mpx.getMenuButtonBoundingClientRect().top,
-            // 导航栏顶部内边距
-            paddingTop: mpx.getMenuButtonBoundingClientRect().top,
-            // 背景透明色
-            color: "",
-        });
-        // 当前标题颜色
-        const currentTitleColor = ref("#333");
-
-        return {
-            style,
-            currentTitleColor,
-        }
-    },
-    lifetimes: {
-        attached() {
-            // 初始化
-            this.updateStyles();
-        }
-    },
-    methods: {
-        // 更新样式
-        updateStyles() {
-            // 标题颜色始终使用 titleColor（用户自定义或默认值）
-            this.currentTitleColor = this.titleColor;
-            // 透明背景模式
-            if (this.indexBg) {
-                this.style.color = "rgba(255, 255, 255, 0)";
-            }
-        },
-
-        // 返回上一级
-        handleReturn() {
-            mpx.navigateBack();
-        },
-
-        // 返回首页
-        handleIndex() {
-            mpx.reLaunch({ url: "/pages/tabbar/home" });
-        },
-
-        // 计算导航栏透明度（供父组件调用）
-        calculateOpacity(scrollTop: number) {
-            const defaultTitleColorWhite = "#fff";
-            const defaultTitleColorBlack = "#333";
-            let color: string;
-            // 计算标题颜色：回到顶部时使用自定义颜色，否则根据渐变模式切换
-            let titleColor = scrollTop === 0
-                ? this.titleColor
-                : (this.isGradient
-                    ? (scrollTop >= 80 ? defaultTitleColorBlack : defaultTitleColorWhite)
-                    : this.titleColor);
-
-            if (scrollTop === 0) {
-                color = "rgba(255, 255, 255, 0)";
-            } else if (scrollTop > 0 && scrollTop <= 10) {
-                color = "rgba(255, 255, 255, 0.1)";
-            } else if (scrollTop >= 10 && scrollTop < 20) {
-                color = "rgba(255, 255, 255, 0.2)";
-            } else if (scrollTop >= 20 && scrollTop < 30) {
-                color = "rgba(255, 255, 255, 0.3)";
-            } else if (scrollTop >= 30 && scrollTop < 40) {
-                color = "rgba(255, 255, 255, 0.4)";
-            } else if (scrollTop >= 40 && scrollTop < 50) {
-                color = "rgba(255, 255, 255, 0.5)";
-            } else if (scrollTop >= 50 && scrollTop < 60) {
-                color = "rgba(255, 255, 255, 0.6)";
-            } else if (scrollTop >= 60 && scrollTop < 70) {
-                color = "rgba(255, 255, 255, 0.7)";
-            } else if (scrollTop >= 70 && scrollTop < 80) {
-                color = "rgba(255, 255, 255, 0.8)";
-            } else {
-                color = "rgba(255, 255, 255, 1)";
-            }
-            this.style.color = color;
-            this.currentTitleColor = titleColor;
-        }
-    },
-})
-</script>
-
-<style lang="scss">
-@use "../../styles/index.scss" as *;
-
-.nav-bar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 99999;
-    transition: background-color 0.2s ease;
-}
-
-.nav-bar-content {
-    display: flex;
-    align-items: center;
-    padding: 0 20rpx;
-}
-
-.nav-bar-left {
-    display: flex;
-    align-items: center;
-    flex: 1;
-}
-
-.left-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 10rpx;
-}
-
-.nav-bar-title {
-    flex: 2;
-    text-align: center;
-    font-size: $font-size;
-    font-weight: 500;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.nav-bar-right {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-}
-</style>
-
-<script type="application/json">
-{
-    "component": true,
-    "usingComponents": {
-        "cube-icon": "@mpxjs/mpx-cube-ui/lib/components/icon/index"
-    }
-}
+<template>
+    <!-- 顶部导航栏（支持滚动变色效果） -->
+    <view class="nav-bar" style="background-color: {{ style.color || (indexBg ? 'transparent' : '#ffffff' ) }};">
+        <view class="nav-bar-content"
+            style="color: {{ currentTitleColor }}; height: {{ style.height }}px;padding-top: {{ style.paddingTop }}px;">
+            <!-- 左侧区域 -->
+            <view class="nav-bar-left">
+                <view class="left-icon" wx:if="{{ leftIcon }}"
+                    bind:tap="{{ leftIcon === 'home' ? 'handleIndex' : 'handleReturn' }}">
+                    <cube-icon type="{{ leftIcon === 'home' ? 'home' : 'back' }}" size="30rpx"
+                        color="{{ currentTitleColor }}" />
+                </view>
+                <slot name="left" />
+            </view>
+
+            <!-- 标题区域 -->
+            <view class="nav-bar-title" wx:if="{{ title }}">
+                {{ title }}
+            </view>
+
+            <!-- 右侧区域 -->
+            <view class="nav-bar-right">
+                <slot name="right" />
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+import mpx, { createComponent, ref } from "@mpxjs/core";
+
+createComponent({
+    options: {
+        multipleSlots: true,
+    },
+    properties: {
+        // 左侧按钮（'home':首页图标, 'back':返回图标，不传或空字符串不显示）
+        leftIcon: {
+            type: String,
+            value: "",
+        },
+        // 标题
+        title: {
+            type: String,
+            value: "",
+        },
+        // 是否首页导航栏透明背景
+        indexBg: {
+            type: Boolean,
+            value: false,
+        },
+        // 是否开启字体渐变 白-黑（滚动变色时）
+        isGradient: {
+            type: Boolean,
+            value: false
+        },
+        // 字体的颜色
+        titleColor: {
+            type: String,
+            value: "#333",
+        }
+    },
+    setup() {
+        // 样式控制对象
+        const style = ref({
+            // 导航栏的高度
+            height: mpx.getMenuButtonBoundingClientRect().bottom - mpx.getMenuButtonBoundingClientRect().top,
+            // 导航栏顶部内边距
+            paddingTop: mpx.getMenuButtonBoundingClientRect().top,
+            // 背景透明色
+            color: "",
+        });
+        // 当前标题颜色
+        const currentTitleColor = ref("#333");
+
+        return {
+            style,
+            currentTitleColor,
+        }
+    },
+    lifetimes: {
+        attached() {
+            // 初始化
+            this.updateStyles();
+        }
+    },
+    methods: {
+        // 更新样式
+        updateStyles() {
+            // 标题颜色始终使用 titleColor（用户自定义或默认值）
+            this.currentTitleColor = this.titleColor;
+            // 透明背景模式
+            if (this.indexBg) {
+                this.style.color = "rgba(255, 255, 255, 0)";
+            }
+        },
+
+        // 返回上一级
+        handleReturn() {
+            mpx.navigateBack();
+        },
+
+        // 返回首页
+        handleIndex() {
+            mpx.reLaunch({ url: "/pages/tabbar/home" });
+        },
+
+        // 计算导航栏透明度（供父组件调用）
+        calculateOpacity(scrollTop: number) {
+            const defaultTitleColorWhite = "#fff";
+            const defaultTitleColorBlack = "#333";
+            let color: string;
+            // 计算标题颜色：回到顶部时使用自定义颜色，否则根据渐变模式切换
+            let titleColor = scrollTop === 0
+                ? this.titleColor
+                : (this.isGradient
+                    ? (scrollTop >= 80 ? defaultTitleColorBlack : defaultTitleColorWhite)
+                    : this.titleColor);
+
+            if (scrollTop === 0) {
+                color = "rgba(255, 255, 255, 0)";
+            } else if (scrollTop > 0 && scrollTop <= 10) {
+                color = "rgba(255, 255, 255, 0.1)";
+            } else if (scrollTop >= 10 && scrollTop < 20) {
+                color = "rgba(255, 255, 255, 0.2)";
+            } else if (scrollTop >= 20 && scrollTop < 30) {
+                color = "rgba(255, 255, 255, 0.3)";
+            } else if (scrollTop >= 30 && scrollTop < 40) {
+                color = "rgba(255, 255, 255, 0.4)";
+            } else if (scrollTop >= 40 && scrollTop < 50) {
+                color = "rgba(255, 255, 255, 0.5)";
+            } else if (scrollTop >= 50 && scrollTop < 60) {
+                color = "rgba(255, 255, 255, 0.6)";
+            } else if (scrollTop >= 60 && scrollTop < 70) {
+                color = "rgba(255, 255, 255, 0.7)";
+            } else if (scrollTop >= 70 && scrollTop < 80) {
+                color = "rgba(255, 255, 255, 0.8)";
+            } else {
+                color = "rgba(255, 255, 255, 1)";
+            }
+            this.style.color = color;
+            this.currentTitleColor = titleColor;
+        }
+    },
+})
+</script>
+
+<style lang="scss">
+@use "../../styles/index.scss" as *;
+
+.nav-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 99999;
+    transition: background-color 0.2s ease;
+}
+
+.nav-bar-content {
+    display: flex;
+    align-items: center;
+    padding: 0 20rpx;
+}
+
+.nav-bar-left {
+    display: flex;
+    align-items: center;
+    flex: 1;
+}
+
+.left-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10rpx;
+}
+
+.nav-bar-title {
+    flex: 2;
+    text-align: center;
+    font-size: $font-size;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.nav-bar-right {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+</style>
+
+<script type="application/json">
+{
+    "component": true,
+    "usingComponents": {
+        "cube-icon": "@mpxjs/mpx-cube-ui/lib/components/icon/index"
+    }
+}
 </script>