更新记录

0.0.1(2025-02-27) 下载此版本

  • init

平台兼容性

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

lime-load-more 加载更多

  • 一般用于标识页面底部加载数据时的状态,兼容uniapp/uniappx
  • 插件依赖lime-style,lime-loading,lime-shared,不喜勿下

安装

插件市场导入即可,首次导入可能需要重新编译

文档

load-more

代码演示

基础使用

通过设置 status 属性展示不同的状态信息

<!-- remaining 点击触发 load-more 事件上 -->
<l-load-more status="remaining" @load-more="load"></l-load-more>
<l-load-more status="loading"></l-load-more>
<l-load-more status="finished"></l-load-more>
<!-- error 点击触发 reload 事件上 -->
<l-load-more status="error" @reload="reload"></l-load-more>
const load = () => {
    console.log('点击了 load')
}
const reload = ()=>{
    console.log('点击了 reload')
}

自定义文案

<l-load-more status="remaining" remainingText="点击加载更多"></l-load-more>
<l-load-more status="loading" loadingText="努力加载中"></l-load-more>
<l-load-more status="finished" finishedText="已经完成所有数据加载"></l-load-more>
<l-load-more status="error" errorText="发生错误,点击再次出发"></l-load-more>

查看示例

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

插件标签

  • 默认 l-load-more 为 component
  • 默认 lime-load-more 为 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)

状态说明

状态值 交互行为 适用场景
remaining 点击触发 load-more 数据未满一屏需手动加载时
loading 禁用交互,加载状态 数据请求过程中
finished 禁用交互,终止提示 所有数据加载完毕
error 点击触发 reload 加载失败需重试时

API

Props

参数 说明 类型 默认值
status 插件状态 string remaining
remainingText remaining文案 string -
loadingText loading文案 string -
finishedText finished文案 string -
errorText error文案 string -
loadingColor 加载图标颜色 string -
loadingSize 加载图标大小 string -
color 文本颜色 string -
fontSize 字体大小 string -

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式。uvue app无效

名称 默认值 描述
--l-load-more-height auto -
--l-load-more-text-color $text-color-3 -
--l-load-more-font-size $font-size -
--l-load-more-color $text-color-4 -
--l-load-more-icon-size 38rpx -

打赏

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

隐私、权限声明

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

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

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

许可协议

MIT协议

暂无用户评论。

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