vue+vant2—篇1—如何使用list组件（下拉刷新，上滑分页加载）

我在项目中的instList.vue中用到了这个组件，利用mixins封装了公用的方法view-module.js

 instList.vue的代码如下所示：

<template>
    <div class="page-instList">
        <van-sticky>
            <!-- <div class="doc-title">{{ $route.query.modelName }}</div> -->
            <van-search v-model="dataForm.instName" show-action placeholder="请输入实例名" @search="onSearch">
                <template #action>
                    <div @click="onSearch">搜索</div>
                </template>
            </van-search>
        </van-sticky>
        <van-pull-refresh v-model="dataListRefreshing" @refresh="onRefresh" success-text="刷新成功">
            <van-list offset="10" v-model="dataListLoading" :immediate-check="false" :error.sync="dataListError" :finished="dataListFinished"
                finished-text="没有更多了" @load="onLoad">
                <van-skeleton title :row="6" :loading="dataListRefreshing"></van-skeleton>
                <van-cell-group  v-for="(item, index) in  dataList" :key="index">
                    <van-cell is-link @click="handleCell(item, 'instDetails')">
                        <!-- 使用 title 插槽来自定义标题 -->
                        <template #title>
                            <span class="custom-title">{{ index + 1 }}.</span>
                            <span>{{ item.inst_name }}</span>
                        </template>
                    </van-cell>
                    <!-- <van-cell is-link @click="handleCell(item, 'instRelate')">
                        <template #title>
                            <span class="custom-title">关联信息查看</span>
                        </template>
                    </van-cell> -->
                </van-cell-group>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module';
export default {
    name: "resourceMgmt-instList",
    mixins: [mixinViewModule],
    inject: ['reload'],
    data() {
        return {
            dataForm: {
                instName: "",
                asstModels: [],
                mainModelInstIds: [],
                modelId: "",
                thisField: []
            },
            mixinViewModuleOptions: {
                createdIsNeed: false,
                activatedIsNeed: false,
                getDataListIsPage: true,
                loadingHide: true,
                getDataListURL: '/cmdb-base/instance/findInstanceByMultiCondition'
            }
        };
    },
    beforeRouteEnter(to, from, next) {
        next((vm) => {
            if (from.name == "resourceMgmt-instModel"||from.path == "/") {
                vm.$data.dataForm = vm.$options.data().dataForm
                vm.dataForm.modelId = vm.$route.query.modelId
                vm.onSearch();
            }
        });
    },
    methods: {
        handleCell(item, route) {
            this.$router.push({
                name: "resourceMgmt-" + route,
                query: {
                    instName: item.inst_name,
                    modelName: this.$route.query.modelName,
                    instId: item.inst_id,
                    modelId: this.$route.query.modelId,
                }
            })
        },
        onSearch() {
            this.dataForm.thisField = [{ relation: "and", fieldName: "inst_name", value: this.dataForm.instName }]
            this.onRefresh()
        }
    },
};
</script>

<style lang="less">
.page-instList {
    
}
</style>

view-module.js的代码如下所示

export default {
  data() {
    return {
      // 设置属性
      mixinViewModuleOptions: {
        createdIsNeed: true, // 此页面是否在创建时，调用查询数据列表接口？
        activatedIsNeed: false, // 此页面是否在激活（进入）时，调用查询数据列表接口？
        getDataListURL: '', // 数据列表接口，API地址
        getDataListIsPage: false, // 是否分页
        delMessage: '', // 删除的提示信息
        deleteURL: '', // 删除接口，API地址
        deleteIsBatch: false, // 删除接口，是否需要批量？
        deleteIsBatchKey: 'id', // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
        exportURL: '', // 导出接口，API地址
        loadingHide: false
      },
      // 默认属性
      dataForm: {}, // 查询条件
      dataList: [], // 数据列表
      order: '', // 排序，asc／desc
      orderField: '', // 排序，字段
      page: 1, // 当前页码
      limit: 15, // 每页数
      total: 0, // 总条数
      dataListError: false,
      dataListFinished: false,
      dataListLoading: false, // 数据列表，loading状态
      dataListRefreshing: false,
      dataListSelections: [], // 数据列表，多选项
      addOrUpdateVisible: false // 新增／更新，弹窗visible状态
    }
    /* eslint-enable */
  },
  activated() {
    if (this.$route.meta.keepAlive) {
      const scrollTop = this.$route.meta.scrollTop;
      const $container = document.querySelector('.main-container');
      $container.scrollTop = scrollTop;
    }
  },
  methods: {
    
    onLoad() {
      this.dataListLoading = true
      let timer = setTimeout(() => {
        this.query()
        this.page++
        clearTimeout(timer)
        timer = null
      }, 300)
    },
    onRefresh() {
      this.dataList = []// 清空列表数据
      this.dataListFinished = false;
      // this.dataListRefreshing = true;
      this.page = 1 //page设置为1
      this.onLoad();
    },
    // 获取数据列表
    query() {
      return new Promise((resolve) => {
        this.$http.post(this.mixinViewModuleOptions.getDataListURL, {
          order: this.order,
          orderField: this.orderField,
          pageNumber: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
          pageSize: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
          requestObj: this.dataForm
        }).then(({
          data: res
        }) => {
          if (res.code !== 'S1A00000') {
            this.dataList = []
            this.total = 0
            this.dataListError = true
            resolve("error")
            return this.$toast.fail(res.msg)
          }
          this.dataList = this.dataList.concat(res.data.list || [])
          this.total = res.data.total

          if (this.dataList.length == this.total) {
            this.dataListFinished = true
          }
          resolve(res)
        }).catch(() => {
          this.dataListError = true
          resolve("error")
        }).finally(() => {
          this.dataListLoading = false
          this.dataListRefreshing = false
        })
      })
    },
    
  }
}