mosowe-page-list 列表加载组件

uniapp/uni_modules组件

下载地址

TIP

上拉加载需要在父组件中显示调用一下：onReachBottom(() => {})

兼容性

平台	android	ios	微信小程序	H5
兼容	√	√	√	√

props

属性	类型	说明	默认
requestData	function	数据请求接口函数，接收一个返回promise的函数，参数值为{pageSize，pageNum}	-
pageSize	number	每页数量	20
emptyText	string	数据为空文案	暂无数据
emptyPaddingTop	string	数据为空时文案距顶部距离	30vh
emptyIconHide	boolean	数据为空时是否隐藏图案	false

slots

slot	说明
default	列表项插槽
empty	空数据插槽

示例代码

<template>
  <mosowe-page-list :requestData="getData">
    <template #default="{ item }">
      <view class="item">{{ item.name }}</view>
    </template>
  </mosowe-page-list>
</template>

<script setup lang="ts">
  import { onReachBottom } from '@dcloudio/uni-app';
  onReachBottom(() => {}); // 上拉加载需要在父组件中显示调用一下
  const getData = params => {
    return new Promise<any>((resolve, reject) => {
      setTimeout(() => {
        resolve({
          list: Array.from({ length: params.pageSize }).map((item: any, index: number) => {
            return { name: '哈哈哈' + index };
          }),
          total: 60
        });
      }, 1000);
    });
  };
</script>

<style lang="scss" scoped>
  .item {
    height: 100rpx;
  }
</style>

贡献者

mosowe