无限滚动列表 - useInfiniteList

useInfiniteList 主要应用与无限滚动列表场景，可在触底、下拉时自动获取下一分页数据，开发者只需要关心列表的查询条件即可，无需关心分页信息

一般来说，useInfiniteList 与 createIO 返回的 io 实例搭配更好使用，如：

src/pages/xxx/index.vue

import {useInfiniteList} from '@ifanrx/uni-mp'
import io from '@/io'

const {data} = useInfiniteList({
  table: io.activity,
  initialPageParam: {query: io.query.compare('status', '=', 'ongoing')},
})

src/io/index.js

import {createIO} from '@ifanrx/uni-mp'

const io = createIO({
  table: {
    activity: 'activity',
  },
})

当数据源不是直接通过读表获取，比如需要从接口、云函数获取列表数据，可以通过自定义 queryFn 来实现，点击查看例子

WARNING

❌ 不要使用这种奇怪的写法，复杂场景通过自定义 queryFn 来实现

Click me to view the code

const {data} = useInfiniteList({
  table: {
    find({offset, limit}) {
      const userQuery = io.query
        .compare('created_by', '=', user.value.id)
        .in('status', [
          COUPON_STATUS.SENT_SUCCEEDED,
          COUPON_STATUS.USED,
          COUPON_STATUS.EXPIRED,
        ])

      if (activityAlias) {
        userQuery.compare('activity_alias', '=', activityAlias)
      }

      let searchQuery = io.query
      if (searchValue.value) {
        searchQuery = io.queryOr(
          io.query.contains('activity_name', searchValue.value),
          io.query.contains('prize_name', searchValue.value)
        )
      }
      const andQuery = io.queryAnd(userQuery, searchQuery)
      return io.prizeLog.find({
        offset,
        limit,
        query: andQuery,
        plain: false,
        expand: 'activity',
      })
    },
  },
  queryKey: ['prizeLog'],
  defaultPageParam: {offset: 0, limit: 20},
})

相关文档

• useInfiniteList - API