更新记录

1.0.2(2024-07-31) 下载此版本

文档更新

1.0.1(2024-07-31) 下载此版本

文档更新

1.0.0(2024-07-31) 下载此版本

发布

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

mosowe-page-list

uniapp/uni_modules组件

::: tip

  1. 页面需设置:"enablePullDownRefresh": true
  2. 上拉加载需要在父组件中显示调用一下:onReachBottom(() => {})
  3. 如需手动刷新,可调用uni.startPullDownRefresh()刷新
  4. 接口返回的data中的数据格式应为{list,total},如不是需要自行处理后再返回给requestData
    :::

兼容性

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

props

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

slots

slot 说明
default 列表项插槽
empty 空数据插槽
top 顶部固定栏插槽
bottom 底部固定栏插槽

expose

事件 说明
getBottomHeight 刷新固定栏高度,如果你的底部栏是动态的则需要在关键节点调用一下,()=>void

示例代码

<template>
  <mosowe-page-list :requestData="getData">
    <!-- 固定顶部栏 -->
    <template #top>
      <view style="height: 200rpx; background-color: #fff">top</view>
    </template>
    <!-- 固定底部栏 -->
    <template #bottom>
      <view
        style="height: 200rpx; background-color: #fff"
        @click="refresh">
        点击bottom刷新
      </view>
    </template>
    <!-- 列表数据 -->
    <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: '哈哈哈' + ((params.pageNum - 1) * params.pageSize + index) };
        }),
        total: 60
      });
    }, 1000);
  });
};
const refresh = () => {
  uni.startPullDownRefresh();
};
</script>

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

隐私、权限声明

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

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

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

许可协议

MIT协议

暂无用户评论。

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