小程序实战（十四）：筛选菜单吸顶揭秘

见解分享

2023-12-27 20:38:38

筛选菜单吸顶：提升小程序用户体验的秘诀

在当今移动互联网时代，小程序已成为一种炙手可热的应用开发技术，以其便捷性、高效性和广阔的覆盖面深受用户青睐。为了提升小程序的使用体验，开发者往往需要针对各种场景进行功能优化，而筛选菜单吸顶就是其中一项重要的技术。

什么是筛选菜单吸顶？

筛选菜单吸顶，顾名思义，是指当用户向下滚动页面时，筛选菜单能够始终固定在页面顶部，方便用户随时进行筛选操作。这一功能在电商、搜索引擎等场景下尤为常见，能够显著提升用户筛选商品或搜索信息的效率。

实现原理

要实现筛选菜单吸顶，需要理解以下核心原理：

元素距离计算： 准确计算筛选菜单到页面顶部的距离，以此作为吸顶的触发条件。
元素定位： 将筛选菜单定位为“固定”位置，使其随着页面滚动而保持在页面顶部。

实战步骤

1. 元素距离计算

为了准确计算元素距离，需要考虑以下因素：

渲染完成性： 元素是否已完成渲染，避免因元素未加载导致距离计算错误。
图片尺寸： 若筛选菜单包含图片，其原始尺寸可能会影响距离计算，需要进行特殊处理。

代码示例：

// 在页面加载完成后，计算元素距离
wx.getSystemInfo({
  success: (res) => {
    const query = wx.createSelectorQuery();
    query.select('.筛选菜单').boundingClientRect();
    query.exec((res) => {
      // 获取筛选菜单距离顶部距离
      const distanceToTop = res[0].top;
      // 存储距离，用于后续吸顶判断
    });
  },
});

2. 元素定位

当元素距离顶部小于一定值时，即可触发吸顶效果。通过将筛选菜单的定位设置为“fixed”，即可实现这一效果。

代码示例：

.筛选菜单 {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

3. 滚动监听

为了实时响应页面滚动，需要监听页面滚动事件，动态更新筛选菜单的位置。

代码示例：

wx.onScroll((res) => {
  const scrollTop = res.scrollTop;
  // 当滚动距离大于触发距离时，触发吸顶效果
  if (scrollTop >= triggerDistance) {
    wx.createSelectorQuery()
      .select('.筛选菜单')
      .style('position', 'fixed')
      .exec();
  } else {
    wx.createSelectorQuery()
      .select('.筛选菜单')
      .style('position', 'static')
      .exec();
  }
});