vant下拉加载+动态查询

最新推荐文章于 2023-12-25 14:29:35 发布

_大菜鸟_

最新推荐文章于 2023-12-25 14:29:35 发布

阅读量583

点赞数 2

分类专栏： vant 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46463643/article/details/119597399

版权

vant 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Vant UI库构建一个具有搜索、加载更多功能的列表页面。通过`<Search>`组件实现搜索功能，利用`<List>`和`<Cell>`展示数据列表，并在用户滚动到底部时自动加载更多数据。同时，文章展示了如何处理数据加载的状态，包括初始加载、加载中、加载结束等不同情况。

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

效果图
在这里插入图片描述

	  <Search
	      v-model="searchValue"
	      placeholder="输入需要查询的信息名称"
	      @search="onSearch"
	      @input="onSearch"
	      @clear="onSearch"
	    />
      <div class="table">
	      <List v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
	        <Cell v-for="item in tableList" :key="item.id" @click="pushRecord(item)">
	          <div>{{item.title}}</div>
	          <div>
	            {{item.sendOrg}}
	            <span v-html="'\u00a0'"></span> 空格符号
	            <span v-html="'\u00a0'"></span>
	            {{item.sendDate&&item.sendDate.slice(0,10)}}
	          </div>
	        </Cell>
	      </List>
    </div>

JS
<script>
import { Search, List, Cell } from 'vant'
import { api } from '@/api/record.js'
export default {
  components: {
    Search,
    List,
    Cell
  },
  data() {
    return {
      loading: false,
      finished: false,
      tableList: [],
      searchValue: '',
      size: 10,
      page: 1,
      loadTag: 1
    }
  },
  methods: {
    /**
     * 搜索
     */
    onSearch() {
      this.getPlatLists('search')
    },

    onLoad() {
      if (this.loadTag == 1) {
        //请求接口得到数据给list数组
        this.getPlatLists('load')

        this.loadTag = 0
        setTimeout(() => {
          // 加载状态结束
          this.loading = false
        }, 500)
      }
    },
    getPlatLists(type) {
    // type 用来区分是搜索还是下拉
      api
        .getMessages({
          content: this.searchValue,
          page: type === 'search' ? 1 : this.page,
          size: this.size
        })
        .then((res) => {
          if (res.result.data.length === 0) {
            // 加载结束
            this.loading = false
            this.finished = true
            this.tableList = []
            return
          }
          if (type === 'load') {
            for (let i = 0; i < res.result.data.length; i++) {
              this.tableList.push(res.result.data[i])
            }
          } else {
            this.page = 1
            this.tableList = res.result.data
          }
          let total = res.result.totalSize
          let end = this.tableList.length
          if (end >= total) {
            this.loading = false
            this.finished = true
            this.loadTag = 0
            return
          } else {
            this.page++
            this.loadTag = 1
            this.loading = false
            this.finished = false
          }
        })
        .catch((err) => {
          this.finished = true
          console.log(err)
        })
    }
  }
}
</script>