更新记录
1.0.1(2022-03-17) 下载此版本
- 增加分割线插槽
- 增加loadedLength事件
1.0.0(2022-03-17) 下载此版本
初次发布
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.12 app-vue | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
bowo-list
基于scroll-view的加载更多列表
属性定义
- height: 列表高度,勿必在页面mounted后计算页面高度并分配列表高度
- totalKey: 获取分页面数据总数的key,默认为:total
- pageDataKey:获取分页数据的当前页面数据数组的key,默认为:items
- startIndex: 获取分页数据页码索引的起始始,默认为:0
- loadPageData:加载分页数据的函数,返回一个Promise,Promise回调数据格式如下:
{ total: 98, items: { [], [], [], ... } }
在该函数内调用请求分页数据服务接口,并返回一个Promise
插槽
- default,默认插槽,用于给使用者自定义列表条目(item),组件未定义任何样式的列表条目,该插槽定义两个插槽属性:
- item,当前item的数据
- index,当前item的索引
- divider,列表项目(item)的分割线,默认是一条色值为#f4f4f4的灰色线。
事件
- loadedLength,已加载条数监听
使用方法
-
组件绘制
<bowo-list page-data-key="pageData" :height="height" :load-page-data="loadPageData"> <template v-slot:divider="{index}"> <view v-if="index > 0" style="width: 100%; height: 5px; background-color: #18BC37;" /> </template> <template v-slot:default="{item, index}"> <text class="word-search__item-title">#{{index}}:{{item.word}}</text> </template> </bowo-list>
-
实现加载分页数据方法(在Vue文件中)
methods: { /** * @param {Number} pageIndex 加载第几页的数据 */ loadPageData(pageIndex) { return http.get('http://localhost:7731/word/words', { keyword: 'take', pageIndex }) } }