LimeUI+1.2.4

主题

LimeAnchor 滚动锚点组件 ​

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

插件依赖：lime-shared

文档链接 ​

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

安装方法 ​

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

代码演示 ​

包裹式 ​

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

html
<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>
typescript

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

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

标记式 ​

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

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

html
<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>
typescript

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);
};

快速预览 ​

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

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

组件说明 ​

组件名说明
l-anchor滚动锚点组件，提供滚动容器和锚点管理功能
l-anchor-section带头部的锚点区域组件，用于创建带有标题的内容区块
l-anchor-mark锚点组件，用于标记滚动锚点位置(uniappx app不支持)

Vue2使用说明 ​

main.js中添加以下代码：

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

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

API文档 ​

l-anchor Props 属性说明 ​

属性名说明类型默认值
lClass组件根元素类名String''
lStyle组件根元素样式String/Object/Array-
v-model / current当前绑定锚点名称（支持v-model）String-
offset锚点距离顶部的偏移量（暂不支持）Number0
upperThreshold距顶部多远时触发scrolltoupper事件Number/String50
lowerThreshold距底部多远时触发scrolltolower事件Number/String50

l-anchor Events 事件 ​

事件名说明回调参数
update:current当前锚点改变时触发name: 当前锚点名称
change当前锚点改变时触发name: 当前锚点名称
scrolltoupper滚动到顶部时触发-
scrolltolower滚动到底部时触发-
scroll滚动时触发event: 滚动事件对象

l-anchor Slots 插槽 ​

名称说明
default滚动容器内容，通常包含多个锚点组件

l-anchor-section Props 属性说明 ​

属性名说明类型默认值
lClass组件根元素类名String''
lStyle组件根元素样式String/Object/Array-
name锚点名称（必填，且唯一）String-

l-anchor-section Slots 插槽 ​

名称说明
header锚点头部内容
default锚点区域内容

l-anchor-mark Props 属性说明 ​

属性名说明类型默认值
lClass组件根元素类名String''
lStyle组件根元素样式String/Object/Array-
name锚点名称（必填，且唯一）String/Number-

l-anchor-mark Slots 插槽 ​

名称说明
default锚点区域内容

注意事项 ​

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

支持与赞赏 ​

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

支付宝赞助微信赞助

源代码 ​

组件源码