更新记录

1.0.0（2023-09-26） 下载此版本

上传

平台兼容性

说明

本组件下包含mosowe-loading-list.vue组件和mosowe-loading-list.tshook，hook的存在就是为了减少重复写上拉加载下拉刷新的流程。因为组件中不能写上拉加载下拉刷新的功能。

mosowe-loading-list组件

属性

slot

示例

 <mosowe-loading-list
    :dataList="dataList"
    :total="total"
    :loading="loading"
    :isRefresh="isRefresh"
    :isEnd="isEnd"
    :isEmpty="isEmpty">
    <template #default="{ item }">
      <view class="item">{{ item.name }}</view>
    </template>
  </mosowe-loading-list>

mosowe-loading-list hooks

使用：

import { useMosoweLoadingList } from '@/components/mosowe-loading-list/mosowe-loading-list';

// 数据获取
const getData = () => {
  setTimeout(() => {
    dataList.value.push(
      ...Array.from({ length: pageSize }).map((item: any, index: number) => {
        return { name: '哈哈哈' + index };
      })
    );
    total.value = 50;
    onQueryEnd();
  }, 1000);
};
const {
  dataList, // 数据列表
  total, // 数据总数
  loading, // 是否加载中
  isRefresh, // 下拉刷新中
  pageNum, // 当前页码
  pageSize, // 每页数目
  isEnd, // 是否加载完全部数据
  isEmpty, // 是否为空数据
  onQueryEnd // 数据请求完后需要重置相关变量，在getData()函数中调用
} = useMosoweLoadingList(getData);