更新记录

1.1.0(2020-06-28) 下载此版本

1.0.9(2020-06-28) 下载此版本

1.0.8(2020-06-08) 下载此版本

不足之处,多多包涵!

查看更多

平台兼容性

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

组件说明

  • 项目中经常碰到左右滑动列表的需求,就自己单独封装了个模板,封装的很简单,使用了 swiper 和 scroll-view 组件,可以满足一般需求,如果数据量特别大的建议使用 uniapp 官方封装的 list 组件。
  • 模板支持下拉刷新,但是需要 app-vue 2.5.12+,微信小程序基础库 2.10.1+
  • 模板支持上拉加载,上拉加载也是我自己封装的一个简单的组件。
  • 模板中的数据都是进行模拟请求的,可以根据自己具体的需求进行修改。
  • 页面的处理逻辑可能还不是那么简洁,如果您有什么意见可以联系我进行讨论修改。
  • 注意:需要关闭页面的下拉刷新配置。

页面数据

  • 页面的主要数据有两个:Tabs 和 TabContent(Tab对应的页面的数据)
  • TabContent 的数据结构为:{ refreshing: false, loading: false, loadall: false, pageIndex: 1, pageSize: 20, list: [], ... },可根据自己的实际业务来修改数据结构
    • refreshing: 表示是否正在下拉刷新中?
    • loading: 表示是否正在上拉加载中?
    • loadall: 表示是否已加载完了全部数据?
    • pageIndex: 页数。
    • pageSize: 每页数据条数。
    • list: 数据列表
    • 其他数据

页面逻辑

页面的逻辑如下:

  • 进入页面后默认加载选中的 Tab 对应的数据内容
  • 左滑、右滑或者切换 Tab 后,先判断该 Tab 下的数据是否初次加载过了,如果还没有初次加载过,就请求数据进行初次加载,如果已经初次加载过数据了,就只进行切换,不做数据的请求。
  • 下拉刷新,先进行请求当前页面的第一页数据,如果请求成功,更新数据,如果请求失败,还是显示老数据。
  • 上拉加载,先判断是否加载完了所有数据,没加载完所有数据才会去请求下一页数据。

隐私、权限声明

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

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

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

许可协议

MIT协议

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