List 分页列表
当你的列表接口采用 page 进行分页时,可以用这个组件快速实现列表页面,这个组件有用以下特性
- 下拉刷新
- 自动分页
- 空组件展示
- 自定义头部底部渲染
- RN端使用
@shopify/flash-list
实现,拥有更好的性能 - 多列支持
如何创建列表组件,请参考入门教程分页列表
示例
以售后列表说明,导出的List组件,将会这样进行使用
- 当用户切换
navType
时,将会自动重新获取数据 - renderEmpty渲染了一个数据为空时显示的组件
- renderItem需要传入一个组件,而非传染之后的内容
import { Column, Empty, Header, Image, Row, Tab, Text, TopView, nav, px, useRoute } from '@/duxui'
import { List } from '@/duxcmsOrder'
import { useState } from 'react'
export default function RefundList() {
const { params } = useRoute()
const [navType, setNavType] = useState(params.type | 0)
return <TopView>
<Header title='退款/售后' />
<Tab value={navType} onChange={setNavType} className='bg-white rb-3'>
{
navList.map(item => <Tab.Item key={item.value} paneKey={item.value} title={item.text} />)
}
</Tab>
<List
url='order/refund'
data={{
type: navType,
}}
renderItem={Item}
renderEmpty={<Empty title='暂无售后' />}
/>
</TopView>
}
const navList = [
{ text: '全部', value: 0 },
{ text: '待审核', value: 1 },
{ text: '待退货', value: 2 },
{ text: '退货中', value: 3 },
{ text: '已退款', value: 4 }
]
const Item = ({ item, index }) => {
return <Column
className='m-3 r-2 bg-white p-3 gap-3'
style={index ? { marginTop: 0 } : {}}
onClick={() => nav('duxcmsOrder/refund/detail', { id: item.id })}
>
<Row justify='between'>
<Text size={1} >{item.refund_no}</Text>
<Text size={1}>{item.state_name}</Text>
</Row>
{
item.goods.map(good => <GoodsItem key={good.id} item={good} />)
}
<Text self='end' className='mv-1'>退款:¥{item.price} 退运费:¥{item.freight}</Text>
</Column>
}
const GoodsItem = ({ item }) => {
return <Row className='gap-3'>
<Image src={item.goods_image} className='r-2' square style={{ width: px(160) }} />
<Column grow justify='between' className='pv-1 overflow-hidden'>
<Row items='center' justify='between'>
<Text bold size={2} numberOfLines={1} grow>{item.goods_name}</Text>
<Text bold size={2}><Text size={1}>¥</Text>{item.goods_price}</Text>
</Row>
<Row items='center' justify='between'>
<Text size={2} color={3} numberOfLines={1}>{item.goods_spec}</Text>
<Text bold size={2} color={2}>x{item.goods_num}</Text>
</Row>
</Column>
</Row>
}
Props
url
类型 | 必填 | 默认值 |
---|---|---|
string | 是 |
和request的url相同
renderItem
每一项的渲染组件
类型 | 必填 | 默认值 |
---|---|---|
Component | 是 |
data
请求参数 request 的 data,当这个参数的内容改变时,会自动刷新数据
类型 | 必填 | 默认值 |
---|---|---|
object | 否 |
requestOption
其他的request请求参数
类型 | 必填 | 默认值 |
---|---|---|
RequestOption | 否 |
page
是否有分页,没有分页的接口可以设置false,默认true
类型 | 必填 | 默认值 |
---|---|---|
boolean | 否 | true |
cache
是否开启数据缓存
类型 | 必填 | 默认值 |
---|---|---|
boolean | 否 | false |
listField
接口返回的列表字段
如果指定的字段不存在,会判断上一级是不是数组,如果是就使用上一级作为列表
类型 | 必填 | 默认值 |
---|---|---|
string | 否 | list |
keyField
列表项的key
类型 | 必填 | 默认值 |
---|---|---|
string | 否 | id |
listCallback
请求回调函数 可以从这里获请求中的数据 需要返列表数据
两个参数,第一个是当前list,第二个是请求返回值,需要返回一个list
类型 | 必填 | 默认值 |
---|---|---|
(list: any[], result: any) => any[] | 否 |
reloadForShow
是否在页面显示出来的时候刷新数据
如果你使用了UI库的TabBar组件,并且是TabBar的组件中的列表,则可以这样传入
reloadForShow={{
useShow: TabBar.useShow
}}
类型 | 必填 | 默认值 |
---|---|---|
boolean 或 ReloadForShow | 否 | false |
option
传给 usePageData 的第二个参数
类型 | 必填 | 默认值 |
---|---|---|
PageDataConfig | 否 |
columns
列数,这是对RN端的配置,其他端需要使用 listStyle 或者 listClassName去实现
类型 | 必填 | 默认值 |
---|---|---|
number | 否 | 1 |
renderHeader
插入头部的内容
类型 | 必填 | 默认值 |
---|---|---|
ReactElement | 否 |
renderFooter
插入底部的内容
类型 | 必填 | 默认值 |
---|---|---|
ReactElement | 否 |
renderLine
每一项的分割线
类型 | 必填 | 默认值 |
---|---|---|
ReactElement | 否 |
renderEmpty
列表为空时显示的内容 这里存在一个默认值
类型 | 必填 | 默认值 |
---|---|---|
ReactElement | 否 |
emptyTitle
未指定renderEmpty时 的空标题
类型 | 必填 | 默认值 |
---|---|---|
string | 否 | 暂无数据 |
onEmptyClick
未指定renderEmpty时 空内容的点击事件
类型 | 必填 | 默认值 |
---|---|---|
() => void | 否 |
onAction
usePageData 的action回调
获取这个回调之后你可以用来手动刷新数据
可以直接将一个ref值赋值给这个属性
const action = useRef()
<List onAction={ref} />
类型 | 必填 | 默认值 |
---|---|---|
(action: PageDataResult) => void | 否 |
listStyle
除了RN端,其他端应用于列表 上的样式,可以用于实现多列布局
类型 | 必填 | 默认值 |
---|---|---|
CSSProperties | 否 |
listClassName
除了RN端,其他端应用于列表上的样式,可以用于实现多列布局
类型 | 必填 | 默认值 |
---|---|---|
string | 否 |
useVirtualList
是否使用虚拟列表 这在小程序和H5端生效 RN端默认使用虚拟列表
开启后还需要传入 virtualListProps 或者 virtualWaterfallProps 参数
如果columns>1使用virtualListProps传入参数
要需要配置 itemSize 才能正常显示,请查看相关文档
开启后,传入renderItem的组件就会接收到一个叫id的props,需要将这个id传递给你的组件的根节点
// 单列示例
<List
url='mall/mall'
renderItem={Item}
renderEmpty={<Empty title='暂无数据' />}
useVirtualList
virtualListProps={{
// 需要将外边距也计算在内
itemSize: List.itemSize(550),
// 设置可是区域外渲染的项目数量
overscanCount: 2,
}}
/>
const Item = ({ item, id, index }) => {
// 将id赋值给根组件
return <Column id={id} style={{ height: px(550) }}>
<Text>项目</Text>
</Column>
}
类型 | 必填 | 默认值 |
---|---|---|
boolean | 否 |
开启虚拟列表会有一些使用限制
- 虚拟列表所在的区域不可动态变更高度,高度需要在你初始布局的时候就确定
- 需要给每一项设置一个itemSize,通常在每一项等高的时候,更合适开启虚拟列表的使用
virtualListProps
传给VirtualList的参数,至少需要配置 itemSize 列表才能正常运行
类型 | 必填 | 默认值 |
---|---|---|
VirtualList | 否 |
virtualWaterfallProps
当 columns > 1 时传递给 VirtualWaterfall 的参数
至少需要配置 itemSize 列表才能正常运行
类型 | 必填 | 默认值 |
---|---|---|
VirtualWaterfall | 否 |
方法
itemSize(size)
开启虚拟列表后,用于提供给itemSize计算的方法
数据选择
列表组件可以用于数据选择
// listSelectMax: 1单选,大于1多选
const { backData } = await nav('使用了List的页面路径', { listSelectMax: 1 })
const res = await backData()
Types
RequestOption
- url (
string
): 请求链接,相对地址 - header (
object
): 附加的 header - data (
object
): 请求数据,根据method
会加在对应位置 - method (
keyof method
): 请求类型 - timeout (
number
): 请求超时时间(ms),默认30000
- repeatTime (
number
): 防止重复请求的时间间隔,在此时间内相同参数的请求将被拦截触发catch
catch
将返回以下数据,如果你不想使用,可以把这个值设置为0
{ code: 3, message: '重复请求' }
- 默认值:
500
- loading (
boolean | string | (() => () => void)
): 是否在请求过程中显示 loading- 传入一个字符串,将在请求时显示这个字符串
- 传入一个 loading 函数,将执行该函数,并要求该函数返回停止 loading 的函数
- toast (
boolean
): 是否在请求至catch
时显示错误提示 - config (
RequestConfig
): 请求配置,用于覆盖默认配置 - middle (
middle
): 中间件,用于覆盖默认配置的中间件
ReloadForShow
- useShow (
() => void
): 页面显示的钩子函数
PageDataConfig
- field (
string
): 用于列表的字段 - listCallback (
(list: any[], result: any) => any[]
): 列表回调函数- list: 列表数据
- result: 请求返回值
- 返回值: 处理后的列表
- cache (
boolean
): 启用缓存,如果为true
,将缓存第一页的内容 - ready (
boolean
): 是否准备好,如果为false
,将不会发起请求 - defaultListData (
any[]
): 默认列表数据
PageDataResult
- loading (
boolean
): 是否正在请求数据 - refresh (
boolean
): 是否正在下拉刷新 - next (
() => void
): 获取下一页数据 - reload (
() => Promise<{}>
): 跳转到第一个页并重新加载数据 - setList (
(value: any[] | ((oldState: any[]) => any[])) => void
): 设置列表数据,useState
返回的第二个值