更新记录
0.0.3(2024-09-06)
下载此版本
0.0.2(2023-09-07)
下载此版本
0.0.1(2023-09-07)
下载此版本
查看更多
平台兼容性
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
使用
<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>
形状
<l-back-top shape="circle"></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 |
形状: circle 、square |
string |
circle |
Events
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 |
- |
打赏
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。