Browse Source

优化侧边栏按钮边界检测逻辑

- 修复安全区域计算,正确处理刘海屏和底部手势区域
- 增加tabBar高度考虑,避免按钮与底部导航栏重合
- 优化默认位置逻辑,隐藏状态时使用屏幕中间位置
pull/1/head
徐飞洋 2 months ago
parent
commit
673f68ea6a
  1. 51
      pages/index/index.js
  2. 2
      pages/index/index.wxml

51
pages/index/index.js

@ -141,24 +141,37 @@ Page({
const moveY = e.touches[0].clientY;
const diffY = moveY - this.data.startY;
// 如果移动距离超过20px,视为拖动
if (Math.abs(diffY) > 20) {
this.setData({
isDragging: true
});
// 更新按钮位置
let newTop = this.data.sidebarBtnTop + diffY * 2; // 转换为rpx
let newTop = this.data.sidebarBtnTop + diffY * 2;
// 限制按钮在屏幕范围内
const screenHeight = wx.getSystemInfoSync().screenHeight * 2; // 转换为rpx
const btnHeight = 180; // 按钮高度,单位rpx
const boundary = 300; // 边界值,限制拖动范围
const systemInfo = wx.getSystemInfoSync();
const screenHeight = systemInfo.screenHeight;
const safeArea = systemInfo.safeArea;
const btnHeight = 90;
const margin = 20;
const tabBarHeight = 70;
if (newTop < boundary) {
newTop = boundary;
} else if (newTop > screenHeight - btnHeight - boundary) {
newTop = screenHeight - btnHeight - boundary;
let minTop, maxTop;
if (safeArea) {
minTop = safeArea.top + margin;
maxTop = safeArea.bottom - btnHeight - margin - tabBarHeight;
} else {
minTop = margin;
maxTop = screenHeight - btnHeight - margin - tabBarHeight;
}
const minTopRpx = minTop * 2;
const maxTopRpx = maxTop * 2;
if (newTop < minTopRpx) {
newTop = minTopRpx;
} else if (newTop > maxTopRpx) {
newTop = maxTopRpx;
}
this.setData({
@ -195,12 +208,18 @@ Page({
console.log('首页初始化')
const savedBtnTop = wx.getStorageSync('sidebarBtnTop');
const savedBtnHidden = wx.getStorageSync('sidebarBtnHidden');
if (savedBtnTop !== '') {
this.setData({
sidebarBtnTop: savedBtnTop,
sidebarBtnHidden: savedBtnHidden || false
});
const systemInfo = wx.getSystemInfoSync();
const screenHeight = systemInfo.screenHeight * 2;
let defaultTop = screenHeight / 2;
if (savedBtnTop !== '' && savedBtnTop !== -100) {
defaultTop = savedBtnTop;
}
this.setData({
sidebarBtnTop: defaultTop,
sidebarBtnHidden: savedBtnHidden || false
});
this.checkAndRestoreLoginStatus()
this.loadGoods()
},

2
pages/index/index.wxml

@ -110,7 +110,7 @@
<!-- 箭头按钮 -->
<view class="sidebar-arrow" bindtap="toggleSidebarBtn">
<text class="arrow-icon {{sidebarBtnHidden ? 'arrow-right' : 'arrow-left'}}"></text>
<text class="arrow-icon {{sidebarBtnHidden ? 'arrow-right' : 'arrow-left'}}"></text>
</view>
</view>

Loading…
Cancel
Save