基础使用

<hi-list>
    <view class="item" v-for="i in 6" :key="i" :length="6">列表项</view>
</hi-list>

设置列表

默认 2 列，通过 columns 属性设置列数。

<hi-list columns="4">
    <view class="item" v-for="i in 6" :key="i" :length="6">列表项</view>
</hi-list>

设置间距

默认间距 20rpx 列，通过 gap 属性设置间距。

<hi-list columns="3" gap="20rpx">
    <view class="item" v-for="i in 6" :key="i" :length="6">列表项</view>
</hi-list>

数据状态

通过 loadmoreStatus 属性设置数据状态。

<hi-list columns="3" loadmoreStatus="loading" :length="6">
    <view class="item" v-for="i in 6" :key="i">列表项</view>
</hi-list>

显示空内容

hi-list 组件会自动判断是否显示空内容，当 length 为 0 并且 loadmoreStatus 不为空时，会显示空内容。
可以通过 showEmpty="false" 来关闭自动显示空内容的功能。

<hi-list columns="3" loadmoreStatus="loading" :length="0">
    <view class="item" v-for="i in 6" :key="i">列表项</view>
</hi-list>

Props

参数	说明	类型	默认值	可选值
length	数据长度	Number	0	-
columns	列数	String	2	-
gap	行/列间距	String	-	-
showEmpty	是否显示空内容	Boolean	true	-
emptyOpts	空内容组件 hi-empty 配置	Object	-	-
showLoadmore	是否显示加载更多	Boolean	true	-
loadmoreStatus	加载更多状态	String	-	-
loadmoreOpts	加载更多组件 hi-loadmore 配置	Object	-	-

Slots

名称	说明
#default	列表内容插槽