vue3+TS弹框下拉刷新(van-popup里面使用van-list)

weixin_47218354

已于 2024-01-08 18:08:12 修改

阅读量538

点赞数 5

文章标签： vue.js 前端 javascript

于 2024-01-08 18:06:09 首次发布

本文链接：https://blog.csdn.net/weixin_47218354/article/details/135463455

版权

本文介绍了如何在Vue应用中使用van-field和van-popup组件实现企业名称的筛选，结合van-list进行分页加载企业列表，并展示了数据请求、处理和加载逻辑。

摘要由CSDN通过智能技术生成

 <!-- 企业名称 -->
          <van-field
            v-model="ruleForm.inTheEnterpriseName"
            label="企业名称"
            placeholder="请选择企业名称"
            is-link
            readonly
            @click="openPopup"
            :rules="[{ required: true, message: '请选择企业名称' }]"
          />
          <van-popup v-model:show="showSealCompany" round position="bottom">
            <div class="enterprise-search">
              <van-form label-align="left">
                <!-- <van-picker
                  class="picker"
                  @cancel="showSealCompany = false"
                  @confirm="closeConfirm"
                /> -->
                <van-search
                  shape="round"
                  v-model="enterpriseName"
                  placeholder="输入用企业称查询"
                  @update:model-value="handleSearchCause(enterpriseName)"
                />
              </van-form>
            </div>

            <div class="box-vanlist">//！！！！！！！下拉刷新不生效添加
              <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了..."
                @load="onLoad"
                style="width: 100%; height: 100%"
              >
              <div v-if="companyNameList.length>0">
                <div
                  class="box-vanlist-item"
                  v-for="(item, index) in companyNameList"
                  :key="index"
                  @click="chooseCompany(item)"
                >
                  {{ item.enterpriseName }}
                </div>
              </div>
               
                <div class="empty" v-else>
                  <van-empty
                    :image="nullImg"
                    image-size="150"
                    description="没有找到匹配的结果"
                  />
                </div>
              </van-list>
            </div>
          </van-popup>




.box-vanlist {
    width: 100%;
    height:350px;
    overflow-y: auto;//设置这个 才能指定高度
  text-align: center;
  font-size: 14px;
  color: #666667;
  line-height: 35px;
}

const companyNameList = ref([]); // 企业名称列表
// // 打开企业名称
const showSealCompany = ref(false);
const openPopup = (val: any) => {
  showSealCompany.value = true;
  selectCompany();
  enterpriseName.value = "";
};
// // 搜索企业
const handleSearchCause = (val: String) => {
    enterpriseName.value = val
    pageIndex.value=1
    selectCompany();
//   }
};
// 选择企业
const chooseCompany=(val)=>{
    showSealCompany.value = false;
ruleForm.inTheEnterpriseName = val.enterpriseName
ruleForm.inTheEnterpriseId = val.inTheEnterpriseId
};
// // 企业名称
const enterpriseName = ref(""); // 搜索关键字
const pageIndex = ref(1); // 页码
const pageSize = ref(10); // 每页展示条数
// loading加载
const finished: Ref<boolean> = ref(false);
const loading = ref(false);
const isLoading: Ref<boolean> = ref(false);

const total: Ref<number> = ref(0);

//获取企业列表
const selectCompany = async () => {
  isLoading.value = true;
  let params = {
    enterpriseName: enterpriseName.value,
    pageIndex: pageIndex.value,
    pageSize: pageSize.value,
  };
  const { success, obj, msg } =
    await sealApplicationServer.inTheEnterprisePageList(params);
  if (success) {
    companyNameList.value =
      pageIndex.value == 1
        ? obj.items
        : companyNameList.value.concat(obj.items);
    total.value = obj.itemTotal;
    loading.value = false;
  isLoading.value = false;

  } else {
    showToast(msg);
    companyNameList.value = [];
    loading.value = false;
  isLoading.value = false;

  }
};
//加载
const onLoad = () => {
  let sum: number = pageIndex.value * 10;
  if (sum > total) {
    finished.value = true;
  } else {
    pageIndex.value++;
    selectCompany();
  }
};