移动端Vant-list的二次封装,查询参数重置

Vant-list的二次封装

场景:在写项目需求的时候,移动端有用到vant-list组件。后续需求更新说要对列表数据页加搜索和筛选的功能。发现每次筛选完得在页面内手动重置一次查询参数。不方便,所以封了一层。

二次封装代码

javascript 复制代码
<template>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    @load="handleLoad"
  >
    <div :class="listClass">
      <slot
        v-for="item in listData"
        :key="item.id"
        v-bind="item"
      />
    </div>
    <div v-if="loadOnce && !listData?.length" class="layout-list__empty">暂无数据</div>
  </van-list>
</template>

<script setup>
const props = defineProps({
  request: {},
  listClass: {},
  pageSize: {
    type: Number,
    default: 10,
  },
});

const listData = ref([]);
const loading = ref(false);
const finished = ref(false);
const loadOnce = ref(false);

let pageNum = 0;
let requesting = false;

const handleLoad = async () => {
  if (requesting || unref(finished)) { return }
  requesting = true;
  ++pageNum;
  const formContent = {
    page: pageNum,
    pageSize: props.pageSize,
  };
  const { total, data } = await props.request(formContent);
  unref(listData).push(...data);
  loadOnce.value = true;
  if (!unref(listData).length || unref(listData).length >= total) {
    finished.value = true;
  }
  loading.value = false;
  requesting = false;
};

const resetSearch = () => {
  listData.value = [];
  loading.value = false;
  finished.value = false;
  loadOnce.value = false;
  pageNum = 0;
  requesting = false;
  handleLoad();
};

defineExpose({
  resetSearch,
});
</script>

<style lang="scss" scoped>
.layout-list {
  &__empty {
    padding: 12px 0;
    color: #666;
    text-align: center;
  }
}
</style>

组件使用

javascript 复制代码
<mb-search
	@updated-search="updatedSearch"
/>
<mb-list
	ref="mbListRef"
	v-slot="item"
	:request="getList(() => (loadForm))"
>
	<div>内容</div>
</mb-list>

<script setup>
import { getList } from '@/services/activiti/instance';

defineProps({
  selectTypeList: {
    type: Array,
    default: () => [],
  },
});
const mbListRef = ref();

const loadForm = ref({
  title: '',
  defName: '',
  instStatus: 'running',
});

function updatedSearch(title) {
  loadForm.value.title = title;
  mbListRef.value.resetSearch();
}

</script>
相关推荐
EricWang135814 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning14 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人24 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00125 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼92143 分钟前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫2 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf