fix menu position
This commit is contained in:
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -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({
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user