更新记录

0.0.3(2024-09-06) 下载此版本

  • feat: 兼容uniappx

0.0.2(2023-09-07) 下载此版本

  • chore: 更新文档

0.0.1(2023-09-07) 下载此版本

  • 初版,可能存在BUG
查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.26 app-vue app-nvue app-uvue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × ×

lime-back-top

  • 用于当页面过长往下滑动时,帮助用户快速回到页面顶部。

安装

  • 在市场导入插件即可在任意页面使用,无须再import

使用

  • 提供简单的使用示例,更多请查看下方的demo

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

<!-- uvue 如果父级是scroll-view 直接使用 -->
<l-back-top text="顶部"></l-back-top>

<!-- uvue 如果父级是list-view 须放在sticky-header节点里 -->
<sticky-header>
    <l-back-top text="顶部"></l-back-top>
</sticky-header>

形状

  • shape: 有circle,square
<l-back-top shape="circle"></l-back-top>

距离显示

  • 当页面滚动到指定offset高度后显示,默认200
    <l-back-top shape="circle" :offset="300"></l-back-top>

查看示例

  • 导入后直接使用这个标签查看演示效果
 // 代码位于 uni_modules/lime-back-top/compoents/lime-back-top 
<lime-back-top />

插件标签

  • 默认 l-back-top 为 component
  • 默认 lime-back-top 为 demo

关于vue2的使用方式

  • 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
  • 关键代码是: 在main.js中 在vue2部分加上这一段即可.
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API

Props

参数 说明 类型 默认值
icon 图标。值为 false 表示不显示图标。不传表示使用默认图标 'bx:arrow-to-top' string ``
text 方案 string ``
fixed 是否绝对定位固定到屏幕右下方 boolean true
duration 回到顶部所需时间(ms), nvue无效 number 100
offset 页面垂直滚动多高后出现, nvue无效 number 200
target nvue需要定位滚动到指定对象,uvue需要指定容器的ID string ``
shape 形状: circlesquare string circle

Events

参数 说明 参数
click 点击触发 -

CSS 变量

组件提供了下列 CSS 变量,可用于自定义样式。 名称 默认值 描述
--l-back-top-font-size 24rpx -
--l-back-top-icon-size 40rpx -
--l-back-top-text-color rgba(0,0,0,0.65) -
--l-back-top-bg-color #fff -
--l-back-top-border-color #d9d9d9 -

打赏

如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问