Browse Source

优化侧边栏按钮:不在顶部时点击《自动隐藏,刷新页面保持记忆

pull/1/head
徐飞洋 2 months ago
parent
commit
53019ff5eb
  1. 34
      pages/index/index.js
  2. 2
      pages/index/index.wxml

34
pages/index/index.js

@ -20,6 +20,7 @@ Page({
currentY: 0,
sidebarBtnTop: 500,
sidebarBtnHidden: false,
userManuallyHidden: false,
// 搜索区域相关
searchSectionVisible: true,
@ -125,9 +126,23 @@ Page({
// 切换按钮显示/隐藏到侧边栏
toggleSidebarBtn() {
this.setData({
sidebarBtnHidden: !this.data.sidebarBtnHidden
});
// 如果当前不在顶部,点击则隐藏按钮
if (this.data.lastScrollTop > 50) {
this.setData({
sidebarBtnHidden: true,
userManuallyHidden: true
});
wx.setStorageSync('sidebarBtnHidden', true);
wx.setStorageSync('userManuallyHidden', true);
} else {
const newHiddenState = !this.data.sidebarBtnHidden;
this.setData({
sidebarBtnHidden: newHiddenState,
userManuallyHidden: newHiddenState
});
wx.setStorageSync('sidebarBtnHidden', newHiddenState);
wx.setStorageSync('userManuallyHidden', newHiddenState);
}
},
// 触摸开始事件
@ -179,13 +194,17 @@ Page({
if (Math.abs(diffY) > screenHeight / 3) {
this.setData({
sidebarBtnTop: -100 // 隐藏按钮
sidebarBtnTop: -100, // 隐藏按钮
sidebarBtnHidden: true,
userManuallyHidden: true
});
wx.setStorageSync('sidebarBtnTop', -100);
wx.setStorageSync('sidebarBtnHidden', true);
wx.setStorageSync('userManuallyHidden', true);
} else {
wx.setStorageSync('sidebarBtnTop', this.data.sidebarBtnTop);
wx.setStorageSync('sidebarBtnHidden', false);
wx.setStorageSync('userManuallyHidden', false);
}
this.setData({
@ -211,6 +230,7 @@ Page({
const savedBtnTop = wx.getStorageSync('sidebarBtnTop');
const savedBtnHidden = wx.getStorageSync('sidebarBtnHidden');
const savedUserManuallyHidden = wx.getStorageSync('userManuallyHidden');
let defaultTop = screenHeight * 0.5;
if (savedBtnTop !== '' && savedBtnTop !== -100) {
@ -223,7 +243,8 @@ Page({
this.setData({
sidebarBtnTop: defaultTop,
sidebarBtnHidden: false,
sidebarBtnHidden: savedBtnHidden || false,
userManuallyHidden: savedUserManuallyHidden || false,
isSearchBarFullyHidden: false,
lastScrollTop: 0
});
@ -1116,7 +1137,8 @@ Page({
// 搜索框始终固定显示,不做隐藏处理
// 侧边栏按钮显示逻辑
if (scrollTop <= threshold && this.data.sidebarBtnHidden) {
// 如果用户手动隐藏过,滚动到顶部也不再自动显示
if (scrollTop <= threshold && this.data.sidebarBtnHidden && !this.data.userManuallyHidden) {
updates.sidebarBtnHidden = false;
needUpdate = true;
wx.setStorageSync('sidebarBtnHidden', false);

2
pages/index/index.wxml

@ -88,7 +88,7 @@
bindtap="scrollToTop"
>
<text class="back-to-top-icon">↑</text>
<text class="back-to-top-text">顶部</text>
<text class="back-to-top-text">top</text>
</view>
<view wx:if="{{showSidebar}}" class="sidebar">
<view class="sidebar-title">招商合作</view>

Loading…
Cancel
Save