fix menu position
This commit is contained in:
@ -1,21 +1,22 @@
|
||||
.custom-navbar {
|
||||
// 导航栏样式
|
||||
}
|
||||
|
||||
.more-menu {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
background: var(--theme-bg-overlay);
|
||||
|
||||
.content {
|
||||
margin: 190rpx 0 0 12rpx;
|
||||
z-index: 1;
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
background: var(--theme-bg-menu);
|
||||
box-shadow: 0 0 12px var(--theme-shadow-medium);
|
||||
border-radius: 2px;
|
||||
}
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -36,6 +36,8 @@ interface JournalData {
|
||||
isFinished: boolean;
|
||||
stickyOffset: number;
|
||||
isShowMoreMenu: boolean;
|
||||
menuTop: number;
|
||||
menuLeft: number;
|
||||
}
|
||||
|
||||
Page({
|
||||
@ -63,7 +65,9 @@ Page({
|
||||
isFetching: false,
|
||||
isFinished: false,
|
||||
stickyOffset: 0,
|
||||
isShowMoreMenu: false
|
||||
isShowMoreMenu: false,
|
||||
menuTop: 0,
|
||||
menuLeft: 0
|
||||
},
|
||||
onLoad() {
|
||||
Events.reset("JOURNAL_REFRESH", () => {
|
||||
@ -110,9 +114,30 @@ Page({
|
||||
});
|
||||
},
|
||||
toggleMoreMenu() {
|
||||
if (!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: !this.data.isShowMoreMenu
|
||||
})
|
||||
isShowMoreMenu: true,
|
||||
menuTop: top + height + 16, // 按钮下方 8px
|
||||
menuLeft: left
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 关闭菜单
|
||||
this.setData({
|
||||
isShowMoreMenu: false
|
||||
});
|
||||
}
|
||||
},
|
||||
/** 阻止事件冒泡 */
|
||||
stopPropagation() {
|
||||
// 空函数,仅用于阻止事件冒泡
|
||||
},
|
||||
toCreater() {
|
||||
wx.navigateTo({
|
||||
|
||||
@ -2,17 +2,22 @@
|
||||
<t-navbar title="我们的记录">
|
||||
<view slot="left" class="more" bind:tap="toggleMoreMenu">
|
||||
<t-icon name="view-list" size="24px" />
|
||||
<view wx:if="{{isShowMoreMenu}}" class="more-menu">
|
||||
<t-cell-group class="content" theme="card">
|
||||
</view>
|
||||
</t-navbar>
|
||||
</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>
|
||||
</view>
|
||||
</t-navbar>
|
||||
</view>
|
||||
<t-indexes
|
||||
class="journal-list"
|
||||
bind:scroll="onScroll"
|
||||
|
||||
Reference in New Issue
Block a user