更新记录

1.0.1(2022-03-17)

  1. 增加分割线插槽
  2. 增加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的加载更多列表

属性定义

  1. height: 列表高度,勿必在页面mounted后计算页面高度并分配列表高度
  2. totalKey: 获取分页面数据总数的key,默认为:total
  3. pageDataKey:获取分页数据的当前页面数据数组的key,默认为:items
  4. startIndex: 获取分页数据页码索引的起始始,默认为:0
  5. loadPageData:加载分页数据的函数,返回一个Promise,Promise回调数据格式如下:
    {
    total: 98,
    items: {
        [], [], [], ...
    }
    }

    在该函数内调用请求分页数据服务接口,并返回一个Promise

插槽

  1. default,默认插槽,用于给使用者自定义列表条目(item),组件未定义任何样式的列表条目,该插槽定义两个插槽属性:
    • item,当前item的数据
    • index,当前item的索引
  2. divider,列表项目(item)的分割线,默认是一条色值为#f4f4f4的灰色线。

事件

  1. loadedLength,已加载条数监听

使用方法

  1. 组件绘制

    <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>
  2. 实现加载分页数据方法(在Vue文件中)

    methods: {
    /**
     * @param {Number} pageIndex 加载第几页的数据
     */
    loadPageData(pageIndex) {
        return http.get('http://localhost:7731/word/words', {
            keyword: 'take',
            pageIndex
        })
    }
    }

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

暂无用户评论。

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