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, currentY: 0,
sidebarBtnTop: 500, sidebarBtnTop: 500,
sidebarBtnHidden: false, sidebarBtnHidden: false,
userManuallyHidden: false,
// 搜索区域相关 // 搜索区域相关
searchSectionVisible: true, searchSectionVisible: true,
@ -125,9 +126,23 @@ Page({
// 切换按钮显示/隐藏到侧边栏 // 切换按钮显示/隐藏到侧边栏
toggleSidebarBtn() { 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) { if (Math.abs(diffY) > screenHeight / 3) {
this.setData({ this.setData({
sidebarBtnTop: -100 // 隐藏按钮 sidebarBtnTop: -100, // 隐藏按钮
sidebarBtnHidden: true,
userManuallyHidden: true
}); });
wx.setStorageSync('sidebarBtnTop', -100); wx.setStorageSync('sidebarBtnTop', -100);
wx.setStorageSync('sidebarBtnHidden', true); wx.setStorageSync('sidebarBtnHidden', true);
wx.setStorageSync('userManuallyHidden', true);
} else { } else {
wx.setStorageSync('sidebarBtnTop', this.data.sidebarBtnTop); wx.setStorageSync('sidebarBtnTop', this.data.sidebarBtnTop);
wx.setStorageSync('sidebarBtnHidden', false); wx.setStorageSync('sidebarBtnHidden', false);
wx.setStorageSync('userManuallyHidden', false);
} }
this.setData({ this.setData({
@ -211,6 +230,7 @@ Page({
const savedBtnTop = wx.getStorageSync('sidebarBtnTop'); const savedBtnTop = wx.getStorageSync('sidebarBtnTop');
const savedBtnHidden = wx.getStorageSync('sidebarBtnHidden'); const savedBtnHidden = wx.getStorageSync('sidebarBtnHidden');
const savedUserManuallyHidden = wx.getStorageSync('userManuallyHidden');
let defaultTop = screenHeight * 0.5; let defaultTop = screenHeight * 0.5;
if (savedBtnTop !== '' && savedBtnTop !== -100) { if (savedBtnTop !== '' && savedBtnTop !== -100) {
@ -223,7 +243,8 @@ Page({
this.setData({ this.setData({
sidebarBtnTop: defaultTop, sidebarBtnTop: defaultTop,
sidebarBtnHidden: false, sidebarBtnHidden: savedBtnHidden || false,
userManuallyHidden: savedUserManuallyHidden || false,
isSearchBarFullyHidden: false, isSearchBarFullyHidden: false,
lastScrollTop: 0 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; updates.sidebarBtnHidden = false;
needUpdate = true; needUpdate = true;
wx.setStorageSync('sidebarBtnHidden', false); wx.setStorageSync('sidebarBtnHidden', false);

2
pages/index/index.wxml

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

Loading…
Cancel
Save