更新记录

0.0.1（2025-12-01）

• init

平台兼容性

uni-app(4.81)

uni-app x(4.81)

lime-anchor 滚动锚点组件

一个功能丰富的滚动锚点组件，用于实时跟踪当前可视区域内的锚点位置，支持滚动到指定锚点，适用于长页面导航、目录索引等场景。组件提供了灵活的配置选项和完整的事件机制，可以满足各种复杂的滚动导航需求。

插件依赖：lime-shared

文档链接

📚 组件详细文档请访问以下站点：

• 滚动锚点组件文档 - 站点1
• 滚动锚点组件文档 - 站点2
• 滚动锚点组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-anchor
2. 导入后重新编译项目
3. 在页面中按需引入并使用相关组件

代码演示

包裹式

使用l-anchor和l-anchor-section创建基本的滚动锚点功能，实时显示当前锚点并支持导航跳转。

<view class="demo-anchor" style="height: 300px;">
    <l-anchor 
      class="scroll-container"
      v-mode="activeName"
      @change="onChange" >
      <!-- 这里是内容区域 -->
      <l-anchor-section name="section1">
        <template #header>
          <text class="section-header">第一部分</text>
        </template>
        <view class="section-content section1">
          <text class="content">这是第一部分的内容...</text>
        </view>
      </l-anchor-section>

      <l-anchor-section name="section2">
        <template #header>
          <text class="section-header">第二部分</text>
        </template>
        <view class="section-content section2">
          <text class="content">这是第二部分的内容...</text>
        </view>
      </l-anchor-section>

      <l-anchor-section name="section3">
        <template #header>
          <text class="section-header">第三部分</text>
        </template>
        <view class="section-content section3">
          <text class="content">这是第三部分的内容...</text>
        </view>
      </l-anchor-section>
    </l-anchor>
</view>

const activeName = ref<string>('section1');

const onChange = (name: string) => {
  console.log('当前锚点:', name);
};

标记式

通过l-anchor-mark组件可以创建基本的锚点标记，适合需要更灵活布局的场景。

注意：在uniappx app端不支持这种写法，建议使用l-anchor-section组件代替。

<view class="demo-anchor">
    <text class="demo-title">使用anchor组件</text>
    <l-anchor style="height: 400px;" v-mode="activeSection" @change="onSectionChange">
      <template v-for="item in sections" :key="item.name">
        <l-anchor-mark :name="item.name" />
        <text class="anchor-title">{{ item.title }}</text>
        <view class="anchor-content">
          <text>{{ item.content }}</text>
        </view>
      </template>
    </l-anchor>
</view>

type Section = {
  name: string;
  title: string;
  content: string;
};

const activeSection = ref('section1');
const sections = ref<Section[]>([
  { name: 'section1', title: '第一章', content: '这是第一章的详细内容...' },
  { name: 'section2', title: '第二章', content: '这是第二章的详细内容...' },
  { name: 'section3', title: '第三章', content: '这是第三章的详细内容...' }
]);

const onSectionChange = (name: string) => {
  console.log('当前锚点:', name);
};

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-anchor/components/lime-anchor -->
<lime-anchor/>

组件说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

l-anchor Props 属性说明

l-anchor Events 事件

l-anchor Slots 插槽

l-anchor-section Props 属性说明

l-anchor-section Slots 插槽

l-anchor-mark Props 属性说明

l-anchor-mark Slots 插槽

注意事项

1. l-anchor-mark 和 l-anchor-section 组件必须在 l-anchor 组件内部使用
2. 每个锚点组件的 name 属性必须唯一，用于标识不同的锚点位置
3. 当通过 v-mode 绑定的值改变时，会自动滚动到对应锚点位置
4. 建议为 l-anchor 组件设置固定高度并启用滚动，以确保良好的用户体验
5. 在有固定导航栏或头部的页面中，应使用 offset 属性调整锚点定位位置

支持与赞赏

如果本组件对你有帮助，欢迎支持作者：

支付宝赞助	微信赞助