uni-swiper-list实现tab切换与上拉、下拉

2,587 阅读2分钟

uni-swiper-list

最近在用uni-app 开发小程序,一直没找到好用的tab+swiper实现类似新闻的功能,索性就借鉴WxP UI搞了一个uniapp版;

uni-swipe-list,用原生swiper实现左右滑动,movable-area来实现下拉加载,暂只支持小程序实现; 感谢WxP UI提供原生小程序版,现已经发布到uni-app插件里。

组件列表

  • swipe-list组件
  • tab组件
  • sroll组件

如何使用

git clone https://github.com/peng20017/uni-swiper-list.git

直接放入 HBuilder X -> 运行 -> 微信小程序

本项目自身就是一个完整的uni-app项目,暂不支持app

组件配置

Scroll 组件

Scroll Attributes

参数 说明 类型 可选值 默认值
requesting 列表数据是否处于加载中 Boolean -- false
end 列表数据加载完成 Boolean -- false
emptyShow 控制空状态显示 Boolean -- false
listCount 当前列表长度 Number -- 0
emptyUrl 空列表的展示图片 String * /assets/image/empty/empty.png
emptyText 空列表的文字提示 String * 未找到数据
hasTop 是否有header Boolean -- false
refreshSize 下拉刷新的高度 Number -- 90
bottomSize 底部高度 Number -- 0
color 颜色 String -- ""
enableBackToTop 双击顶部状态栏回到顶部 Boolean -- false

Scroll Events

事件名称 说明 回调参数
refresh 下拉刷新 --
more 上拉加载 --

Scroll Slots

name 说明
-- 列表组件主体

Tab 组件

Tab Attributes

参数 说明 类型 可选值 默认值
tabData 数据源 Array -- []
tabCur 当前聚焦项索引 Number -- 0
scroll 是否可以超出滚动 Boolean -- false
size tab高度 Number -- 90
color 颜色 String -- ""

Tab Events

事件名称 说明 回调参数
change tab切换事件 当前选中tab的index

Tab Methods

方法名 说明 回调参数
scrollByIndex 让tab组件根据传入的index进行滚动 需要切换tab项的index

贡献

如果有什么好的建议欢迎提issues