在 Uni App 中实现优雅的锚点导航：自动吸顶和动态选择

前端

2023-12-16 03:50:10

在构建交互式移动应用时，锚点定位对于提升用户体验至关重要。在 Uni App 的强大框架中，我们可以轻松实现锚点自动吸顶和滚动自动选择功能，创造顺畅无缝的导航体验。

锚点自动吸顶

当用户滚动页面时，锚点自动吸顶功能可以将选定的锚点固定在页面顶部，增强用户对当前位置的感知。这在长页面或具有多个章节的内容中尤其有用。

滚动自动选择

滚动自动选择功能会根据页面的滚动位置，动态更新选定的锚点。当用户滚动到某个锚点附近时，该锚点将自动高亮，指示用户当前所在的位置。这使导航更加直观和方便。

实现原理

在 Uni App 中实现锚点自动吸顶和滚动自动选择功能需要以下步骤：

定义锚点： 使用 <a name="anchor-name"> 标签定义页面中的锚点。
绑定事件： 在页面滚动事件中，使用 Page.scrollOffset 属性获取页面滚动位置。
计算锚点位置： 获取所有锚点的位置并将其与滚动位置进行比较。
更新选定锚点： 根据锚点位置和滚动位置，更新选定的锚点。
实现自动吸顶： 使用 Uni.$getApp().globalData.scrollTop 变量来存储页面滚动位置，并在滚动时更新锚点样式以使其吸顶。

示例代码

以下是实现锚点自动吸顶和滚动自动选择功能的示例代码：

import uniApp from '@dcloudio/uni-app';

Page({
  data: {
    anchors: [], // 锚点数组
    selectedAnchor: '', // 选定的锚点
  },

  onLoad() {
    // 获取页面中的所有锚点
    this.getAnchors();

    // 在页面滚动时更新选定的锚点
    uniApp.onWindowScroll((e) => {
      this.updateSelectedAnchor(e.detail.scrollTop);
    });
  },

  // 获取页面中的所有锚点
  getAnchors() {
    const query = uniApp.createSelectorQuery();
    query.selectAll('.anchor').fields({
      id: true,
      rect: true,
    }).exec((res) => {
      this.anchors = res[0].map((anchor) => {
        return {
          id: anchor.id,
          top: anchor.top,
          height: anchor.height,
        };
      });
    });
  },

  // 根据滚动位置更新选定的锚点
  updateSelectedAnchor(scrollTop) {
    let selectedAnchor = '';
    this.anchors.forEach((anchor) => {
      if (scrollTop >= anchor.top && scrollTop < anchor.top + anchor.height) {
        selectedAnchor = anchor.id;
      }
    });

    if (selectedAnchor !== this.selectedAnchor) {
      this.setData({ selectedAnchor });
    }
  },
});