更新记录

0.0.7（2025-08-31） 下载此版本

• chore: 更新文档

0.0.6（2025-04-21） 下载此版本

• feat: 兼容uniappx 鸿蒙next

0.0.3（2024-09-06） 下载此版本

• feat: 兼容uniappx

平台兼容性

uni-app(4.74)

uni-app x(4.75)

其他

lime-back-top 回到顶部组件

一个功能丰富的回到顶部组件，用于当页面过长往下滑动时，帮助用户快速回到页面顶部。支持自定义图标、文本、形状、位置等多种配置，可用于长列表、长文章、商品详情等多种场景。组件提供了丰富的自定义选项，可以满足各种复杂的交互设计需求。

插件依赖：lime-shared、lime-style、lime-icon

文档链接

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

• 回到顶部组件文档 - 站点1
• 回到顶部组件文档 - 站点2
• 回到顶部组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-back-top
2. 导入后可能需要重新编译项目
3. 在页面中使用l-back-top组件

::: tip 注意🔔 本插件依赖的【lime-svg】是原生插件，如果购买(收费为6元)则需要自定义基座，才能使用， 若不需要删除即可 :::

代码演示

基础用法

最简单的回到顶部组件用法，点击后自动滚动到页面顶部。

<l-back-top />

带文本的回到顶部

添加文本提示，使用户更清楚按钮的功能。

<l-back-top text="顶部" />

自定义图标

通过icon属性设置自定义图标。

<l-back-top icon="arrow-up" />

不同形状

通过shape属性设置不同的形状，支持圆形和方形。

<l-back-top shape="circle" />
<l-back-top shape="square" />

自定义显示距离

通过offset属性设置页面滚动多少距离后显示回到顶部按钮。

<l-back-top :offset="300" />

自定义位置

通过bottom和right属性设置按钮在屏幕中的位置。

<l-back-top :bottom="100" :right="30" />

在小程序中使用

由于uniappx对所有的元素都是默认是相对定位position: relative;，必须保证插件是在页面的根节点，或者监听页面的滚动事件把scrollTop传给插件。

<!-- 方式1：根节点 必须为页面 -->
<l-back-top text="顶部" />

<!-- 方式2：监听页面的滚动事件 把scrollTop传给插件 -->
<l-back-top text="顶部" :scrollTop="scrollTop"/>

// 监听页面滚动
onPageScroll(e) {
  this.scrollTop = e.scrollTop;
}

快速预览

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

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

插件标签说明

Vue2使用说明

main.js中添加以下代码：

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

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

API文档

Props 属性说明

Events 事件

主题定制

组件提供了以下CSS变量，可用于自定义样式：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助