移动端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>
相关推荐
Myli_ing18 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维36 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_1 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~1 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴1 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4042 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html