mp-query-list 数据列表

介绍文档：数据列表

代码演示

支持传入 useQuery、useRequest 和 useInfiniteList 的返回结果，组件能够自动处理错误、判断空数据状态，以及管理下一页数据的加载。

useInfiniteList

Click me to view the code

<script setup>
import {useInfiniteList} from '@ifanrx/uni-mp'
import {sleep} from 'licia'

import io from '@/io'

const noticeQueryResult = useInfiniteList({
  queryFn: ({pageParam}) => {
    return sleep(2000).then(() =>
      io.notice.find(pageParam).then(res => {
        return res.data
      })
    )
  },
  shouldRefreshOnPullDown: true,
  initialPageParam: {
    limit: 8,
    // 调试数据为空的情况
    // query: io.query.compare('viewed', '=', true).compare('message', '=', 1),
    expand: 'created_by',
  },
})
</script>

<template>
  <mp-nav-bar title="infinite-list" />

  <mp-safe-layout :bottom="20" class="page">
    <view class="notice-list">
      <mp-query-list :queryResult="noticeQueryResult">
        <template #default="{item, index}">
          <view class="notice-item">当前 id（{{ index + 1 }}）：{{ item.id }}</view>
        </template>
      </mp-query-list>
    </view>
  </mp-safe-layout>
</template>

<style scoped>
:global(page) {
  background: #f7f7f7;
}

.notice-list {
  width: 100%;
}

.notice-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250rpx;
  border: 1px solid #eee;
}

.notice-item:not(:first-child) {
  margin-top: 25rpx;
}
</style>

useQueryList

Click me to view the code

<script setup>
import {useQuery, useWatchLoading} from '@ifanrx/uni-mp'
import {sleep} from 'licia'

import io from '@/io'

const notionQueryResult = useQuery(() => {
  return sleep(2000).then(() => io.notice.find({offset: 0, limit: 10}))
})

useWatchLoading(notionQueryResult.isFetching)
</script>

<template>
  <mp-nav-bar title="query-list" />

  <mp-safe-layout :bottom="20" class="page">
    <mp-query-list :queryResult="notionQueryResult">
      <template #default="{item}">
        <view class="notice-item">当前 id：{{ item.id }}</view>
      </template>

      <template #empty> 自定义数据为空 </template>
    </mp-query-list>
  </mp-safe-layout>
</template>

<style scoped>
:global(page) {
  background: #f7f7f7;
}

.notice-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250rpx;
  border: 1px solid #eee;
}

.notice-item:not(:first-child) {
  margin-top: 25rpx;
}
</style>

API

Props

Prop name	Description	Type	Values	Default
queryResult	useQuery/useRequest/useInfiniteList 的返回结果	object	-	required
emptyText	空数据文案	string	-	'暂无数据'
loadingText	加载下一页文案	string	-	'加载中...'
noMoreText	加载完毕文案	string	-	'到底啦'

Slots

Name	Description	Bindings
header	自定义列表头部内容
default	自定义列表项内容	index number - 当前项目索引 item object - 当前项目
error	自定义 error 内容，不覆盖该 slot 则默认显示 empty 的内容
empty	自定义空数据内容
footer	自定义列表底部内容，默认在 useInfiniteList 时显示「加载中」、「到底啦」文案

源码

组件 • 示例