fix menu position

This commit is contained in:
Timi
2025-12-11 14:46:55 +08:00
parent fc6edcb5ab
commit 0cdef54954
3 changed files with 58 additions and 27 deletions

View File

@ -1,21 +1,22 @@
.custom-navbar { .custom-navbar {
// 导航栏样式
}
.more-menu { .more-menu {
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 999;
position: fixed;
background: var(--theme-bg-overlay);
.content {
z-index: 1000;
position: fixed; position: fixed;
background: var(--theme-bg-overlay); background: var(--theme-bg-menu);
box-shadow: 0 0 12px var(--theme-shadow-medium);
.content { border-radius: 8rpx;
margin: 190rpx 0 0 12rpx;
z-index: 1;
position: fixed;
background: var(--theme-bg-menu);
box-shadow: 0 0 12px var(--theme-shadow-medium);
border-radius: 2px;
}
} }
} }

View File

@ -36,6 +36,8 @@ interface JournalData {
isFinished: boolean; isFinished: boolean;
stickyOffset: number; stickyOffset: number;
isShowMoreMenu: boolean; isShowMoreMenu: boolean;
menuTop: number;
menuLeft: number;
} }
Page({ Page({
@ -63,7 +65,9 @@ Page({
isFetching: false, isFetching: false,
isFinished: false, isFinished: false,
stickyOffset: 0, stickyOffset: 0,
isShowMoreMenu: false isShowMoreMenu: false,
menuTop: 0,
menuLeft: 0
}, },
onLoad() { onLoad() {
Events.reset("JOURNAL_REFRESH", () => { Events.reset("JOURNAL_REFRESH", () => {
@ -110,9 +114,30 @@ Page({
}); });
}, },
toggleMoreMenu() { toggleMoreMenu() {
this.setData({ if (!this.data.isShowMoreMenu) {
isShowMoreMenu: !this.data.isShowMoreMenu // 打开菜单时计算位置
}) const query = wx.createSelectorQuery();
query.select(".more").boundingClientRect();
query.exec((res) => {
if (res[0]) {
const { top, left, height } = res[0];
this.setData({
isShowMoreMenu: true,
menuTop: top + height + 16, // 按钮下方 8px
menuLeft: left
});
}
});
} else {
// 关闭菜单
this.setData({
isShowMoreMenu: false
});
}
},
/** 阻止事件冒泡 */
stopPropagation() {
// 空函数,仅用于阻止事件冒泡
}, },
toCreater() { toCreater() {
wx.navigateTo({ wx.navigateTo({

View File

@ -2,17 +2,22 @@
<t-navbar title="我们的记录"> <t-navbar title="我们的记录">
<view slot="left" class="more" bind:tap="toggleMoreMenu"> <view slot="left" class="more" bind:tap="toggleMoreMenu">
<t-icon name="view-list" size="24px" /> <t-icon name="view-list" size="24px" />
<view wx:if="{{isShowMoreMenu}}" class="more-menu">
<t-cell-group class="content" theme="card">
<t-cell title="新纪录" leftIcon="add" bind:tap="toCreater" />
<t-cell title="按列表查找" leftIcon="view-list" bind:tap="toSearch" />
<t-cell title="按日期查找" leftIcon="calendar-1" bind:tap="toDate" />
<t-cell title="按地图查找" leftIcon="location" bind:tap="toMap" />
</t-cell-group>
</view>
</view> </view>
</t-navbar> </t-navbar>
</view> </view>
<view wx:if="{{isShowMoreMenu}}" class="more-menu" catchtap="toggleMoreMenu">
<t-cell-group
class="content"
theme="card"
style="top: {{menuTop}}px; left: {{menuLeft}}px;"
catchtap="stopPropagation"
>
<t-cell title="新纪录" leftIcon="add" bind:tap="toCreater" />
<t-cell title="按列表查找" leftIcon="view-list" bind:tap="toSearch" />
<t-cell title="按日期查找" leftIcon="calendar-1" bind:tap="toDate" />
<t-cell title="按地图查找" leftIcon="location" bind:tap="toMap" />
</t-cell-group>
</view>
<t-indexes <t-indexes
class="journal-list" class="journal-list"
bind:scroll="onScroll" bind:scroll="onScroll"