Flutter App

深浅模式

List 列表 ​

更新: 2024/12/17 字数: 0 字 时长: 0 分钟

说明

van-list组件和van-cell组件的结合，封装了四种样式的列表，可根据实际需求使用。

基本使用 ​

基本列表 ​

包含图片、文字的基础样式列表。

vue
<script>
function getImgUrl(name) {
  return new URL(`../../assets/image/${name}.png`, import.meta.url).href;
}
const list = [
  { title: "一号鱼塘", img: getImgUrl1("fish-red") },
  { title: "二号鱼塘", img: getImgUrl1("fish-yellow") },
  { title: "三号鱼塘", img: getImgUrl1("fish-blue") },
  { title: "二号鱼塘", img: getImgUrl1("fish-yellow") },
  { title: "三号鱼塘", img: getImgUrl1("fish-blue") },
  { title: "三号鱼塘", img: getImgUrl1("fish-blue") },
  { title: "三号鱼塘", img: getImgUrl1("fish-blue") },
  { title: "三号鱼塘", img: getImgUrl1("fish-blue") },
  { title: "三号鱼塘", img: getImgUrl1("fish-blue") },
];
</script>
<template>
  <ListBase :list="list" finished />
</template>

文字列表 ​

纯文字的列表，可用于显示新闻、公告、任务等列表，下方可以显示消息发布的时间，右侧可配置不同消息的状态显示。

vue
<script>
function getImgUrl(name) {
  return new URL(`../../assets/image/${name}.png`, import.meta.url).href;
}
const list = [
  {
    title: "重庆市梁平区社会工作者2024年第三季度第三季度公开招聘工作人员公告",
    time: "报名时间：2024-07-07",
    status: "待开始",
  },
  {
    title: "重庆市梁平区社会工作者2024年第三季度第三季度公开招聘工作人员公告",
    time: "报名时间：2024-07-07",
    status: "进行中",
  },
  {
    title: "重庆市梁平区社会工作者2024年第三季度第三季度公开招聘工作人员公告",
    time: "报名时间：2024-07-07",
    status: "已结束",
  },
  {
    title: "重庆市梁平区社会工作者2024年第三季度第三季度公开招聘工作人员公告",
    time: "报名时间：2024-07-07",
    status: "进行中",
  },
  {
    title: "重庆市梁平区社会工作者2024年第三季度第三季度公开招聘工作人员公告",
    time: "报名时间：2024-07-07",
    status: "进行中",
  },
  {
    title: "重庆市梁平区社会工作者2024年第三季度第三季度公开招聘工作人员公告",
    time: "报名时间：2024-07-07",
    status: "进行中",
  },
];
</script>
<template>
  <ListText :list="list" finished />
</template>

图文列表 ​

在文字列表的基础上，添加了图片的配置。

vue
<script>
function getImgUrl(name) {
  return new URL(`../../assets/image/${name}.png`, import.meta.url).href;
}
const list = [
  {
    title: "第八届“创客中国”暨2023年江苏省中小企业创新创业大赛",
    time: "2023-07-07 09:00",
    status: "进行中",
    img: getImgUrl1("kjdjwl"),
  },
  {
    title: "第八届“创客中国”暨2023年江苏省中小企业创新创业大赛",
    time: "2023-07-07 09:00",
    status: "已结束",
    img: getImgUrl1("kjdjwl"),
  },
  {
    title: "第八届“创客中国”暨2023年江苏省中小企业创新创业大赛",
    time: "2023-07-07 09:00",
    status: "待开始",
    img: getImgUrl1("kjdjwl"),
  },
  {
    title: "第八届“创客中国”暨2023年江苏省中小企业创新创业大赛",
    time: "2023-07-07 09:00",
    status: "进行中",
    img: getImgUrl1("kjdjwl"),
  },
  {
    title: "第八届“创客中国”暨2023年江苏省中小企业创新创业大赛",
    time: "2023-07-07 09:00",
    status: "进行中",
    img: getImgUrl1("kjdjwl"),
  },
  {
    title: "第八届“创客中国”暨2023年江苏省中小企业创新创业大赛",
    time: "2023-07-07 09:00",
    status: "进行中",
    img: getImgUrl1("kjdjwl"),
  },
];
</script>
<template>
  <ListTextImage :list="list" finished />
</template>

标签列表 ​

在图文列表的基础上，增加了关于列表项的标签配置，下方可以添加描述，可以用于人物等列表。

vue
<script>
function getImgUrl(name) {
  return new URL(`../../assets/image/${name}.png`, import.meta.url).href;
}
const list = [
  {
    title: "张三",
    label: "特大风险",
    subtitle: "这是一条基本信息这是一条基本信息",
    status: "待核实",
    img: getImgUrl1("people"),
  },
  {
    title: "张三",
    label: "特大风险",
    subtitle: "这是一条基本信息这是一条基本信息",
    status: "待核实",
    img: getImgUrl1("people"),
  },
  {
    title: "张三",
    label: "特大风险",
    subtitle: "这是一条基本信息这是一条基本信息",
    status: "待核实",
    img: getImgUrl1("people"),
  },
  {
    title: "张三",
    label: "特大风险",
    subtitle: "这是一条基本信息这是一条基本信息",
    status: "已核实",
    img: getImgUrl1("people"),
  },
  {
    title: "张三",
    label: "特大风险",
    subtitle: "这是一条基本信息这是一条基本信息",
    status: "已核实",
    img: getImgUrl1("people"),
  },
  {
    title: "张三",
    label: "特大风险",
    subtitle: "这是一条基本信息这是一条基本信息",
    status: "已核实",
    img: getImgUrl1("people"),
  },
];
</script>
<template>
  <ListLabel :list="list" finished />
</template>

异步加载数据 ​

传入loading和finished两个属性来控制列表的加载，在列表滚动到底部的时候，会触发load事件，并将loading设置为true，可以通过load事件来异步加载数据，加载完成后将loading设置为false，若全部加载完毕可将finished设置为true。

vue
<script setup>
function getImgUrl1(name) {
  return new URL(`../../assets/image/example/${name}.png`, import.meta.url)
    .href;
}
const list = ref([
  { title: "一号鱼塘", img: getImgUrl1("fish-red") },
  { title: "二号鱼塘", img: getImgUrl1("fish-yellow") },
  { title: "三号鱼塘", img: getImgUrl1("fish-blue") },
  { title: "二号鱼塘", img: getImgUrl1("fish-yellow") },
  { title: "三号鱼塘", img: getImgUrl1("fish-blue") },
  { title: "三号鱼塘", img: getImgUrl1("fish-blue") },
  { title: "三号鱼塘", img: getImgUrl1("fish-blue") },
  { title: "三号鱼塘", img: getImgUrl1("fish-blue") },
  { title: "三号鱼塘", img: getImgUrl1("fish-blue") },
]);
const loading = ref(false);
const finished = ref(false);
function onLoad() {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push({ title: "三号鱼塘", img: getImgUrl1("fish-blue") });
    }

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
}
</script>
<template>
  <div class="overflow-y-auto px-15 pt-11">
    <ListBase
      :list="list"
      v-model:loading="loading"
      :finished="finished"
      @load="load"
    />
  </div>
</template>

注意

van-list默认监听其最近的滚动容器。如果滚动事件未正确绑定，load事件可能不会触发。
解决方法：明确指定滚动容器，确保容器的 overflow 设置为 auto 或 scroll。

API ​

传参配置 ​

参数说明类型默认值
list列表数据，不同列表所需字段不同，见下方说明Array<ListType>[]
v-model:loading是否处于加载状态，加载过程中不触发load事件bollenfalse
v-model:error是否加载失败，加载失败后点击错误提示可以重新触发load事件booleanfalse
finished是否加载完毕，加载完毕将不再触发load事件booleanfalse
offset列表滚动到距离底部多少距离时触发load事件，单位为pxnumber|string300
finishedText加载完毕后的提示文案string已全部加载
loadingText加载中的提示文案string加载中...
errorText加载失败后的提示文案string点击重试
immediate-check是否在初始化时立即执行滚动位置检查booleantrue
disabled是否禁用滚动加载booleanfalse
direction列表滚动方向，可选值为up和downstringdown
statusList状态列表，可自定义显示的状态颜色Object{}

类型声明 ​

ts
type ListType = {
  //标题
  title: string;
  //图片路径
  img: string;
  //标签
  label: string;
  //副标题，可以是时间，描述等
  subtitle: string;
  //状态
  status: string;
};

事件 ​

事件名说明回调参数
load滚动条与底部距离小于 offset 时触发-
click点击列表项触发点击的列表项数据, 索引

Released under the MIT License.

Copyright © 2024-2025 by：社会治理产业研究院

本站访客数 人次 本站总访问量 次