Fix capsule-aligned navigation and refresh mini program typography

2026-10-04 10:30:17 +08:00
parent adfd0574cc
commit c2b51f96e0
45 changed files with 307 additions and 216 deletions
@@ -0,0 +1,33 @@
+const { navigationGeometry } = require("../../utils/layout");
+
+Component({
+  properties: {
+    title: String,
+    back: { type: Boolean, value: false },
+  },
+  data: navigationGeometry(),
+  lifetimes: {
+    attached() {
+      this.updateLayout();
+    },
+  },
+  pageLifetimes: {
+    resize() {
+      this.updateLayout();
+    },
+  },
+  methods: {
+    updateLayout() {
+      const info = wx.getWindowInfo ? wx.getWindowInfo() : wx.getSystemInfoSync();
+      let menu = {};
+      try {
+        menu = wx.getMenuButtonBoundingClientRect();
+      } catch (_) {}
+      this.setData(navigationGeometry(info, menu));
+    },
+    goBack() {
+      if (getCurrentPages().length > 1) wx.navigateBack({ delta: 1 });
+      else wx.reLaunch({ url: "/pages/home/home" });
+    },
+  },
+});
@@ -0,0 +1 @@
+{ "component": true }
@@ -0,0 +1,11 @@
+<view class="navigation" style="height: {{headerHeight}}px">
+  <view class="navigation-row" style="top: {{top}}px; height: {{rowHeight}}px; width: {{titleWidth}}px">
+    <view wx:if="{{back}}" class="back" bindtap="goBack" aria-role="button" aria-label="返回">
+      <view class="back-arrow"></view>
+    </view>
+    <text class="navigation-title">{{title}}</text>
+  </view>
+</view>
+<scroll-view class="content" style="top: {{headerHeight}}px; height: {{scrollHeight}}px" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
+  <slot />
+</scroll-view>
@@ -0,0 +1,53 @@
+.navigation {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 25;
+  background: #f6f9f6;
+}
+.navigation-row {
+  position: absolute;
+  left: 16px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.navigation-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #194f42;
+  font-size: 19px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+.back {
+  width: 28px;
+  height: 36px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.back-arrow {
+  width: 10px;
+  height: 10px;
+  border-left: 2px solid #194f42;
+  border-bottom: 2px solid #194f42;
+  transform: rotate(45deg);
+}
+.content {
+  position: fixed;
+  left: 0;
+  right: 0;
+  width: 100%;
+  overflow: hidden;
+}
+::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}