数据列表 - 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>

相关文档

• mp-query-list - 组件