list

列表组件，默认情况下使用dict-list使用, 如果字典包配置中有配置componentsPreFix字段，请根据此字段的具体配置值进行前缀修改，如配置了componentsPreFix为Bu, 则使用bu-list使用。

复制成功

00:00

组件结构

组件封装结构如下

<div class="van-list-dict">
    <!-- 列表区域 -->
    <van-pull-refresh
      ref="VanPullRefreshRef"
    >
      <van-list
        ref="VanListRef"
      >
        <van-empty ref="VanEmptyRef" >
        </van-empty>
      </van-list>
    </van-pull-refresh>
  </div>

const VanListRef = ref(null)
const getVanListRef = () => {
  return VanListRef.value
}

const VanPullRefreshRef = ref(null)
const getVanPullRefreshRef = () => {
  return VanPullRefreshRef.value
}

const VanEmptyRef = ref(null)
const getVanEmptyRef = () => {
  return VanEmptyRef.value
}

defineExpose({ handleSearch, reset, getVanListRef, getVanPullRefreshRef, getVanEmptyRef })

属性、事件和插槽继承技巧

此组件仅引用了van-list、van-pull-refresh、van-empty三个组件，其中list作为主组件，可直接继承原生属性、事件和插槽。 pull-refresh想要继承原生属性、事件和插槽时，添加pull-refresh-前缀即可，同理，empty组件也一样，添加empty-前缀即可。

点击阅读list组件使用文档

点击阅读pull-refresh组件使用文档

点击阅读empty组件使用文档

属性

属性	类型	说明	默认值
enablePullRefresh	boolean	是否开启下拉刷新	true
immediateLoad	Boolean	是否立即触发请求列表	true
pageSize	Number	单页页码	10
validateSearchParamsFun(是否是搜索触发的校验)	function	当immediateLoad为false时会触发此方法校验，return false 则不会触发搜索	return true
fetchData(page, size)	function	获取列表数据的接口方法(page: 页码, size：上述配置的pageSize	无

插槽

插槽名称	返回值	说明
search	无	顶部搜索区域插槽
list-item	item, index	列表项插槽， item为当前项的数据，index为索引

方法

方法名称	返回值	说明
handleSearch	无	搜索，传入搜搜条件（无需page和size）v1.1.0开始无需传入参数
reset	无	重置表单及页面展示

提示

v1.1.0版本开始，handleSearch不传递任何参数，请求参数将从自身在 fetchData请求接口自行拼接请求参数。