vue处理一千张图片进行分页加载思路详解

   //获取该页的数据 
	let minNum = (val.page - 1)*val.limit 
   	let maxNum =val.page*val.limit 
   	this.imgList = dataList.slice(minNum,maxNum)

//渲染容器
<el-card class="box-card"
   v-for="(item,index) in imglist"
   :key="item"
   shadow="hover">
   <div class="box-card-div">
    <img
     class="screen-img"
     :class="lazy" data-src="item.img"
     :key="index"
     :alt="item.name"
    />
   	<div class="title">{{ item.name }}</div>
  </div>
</el-card>

//分页
<pagination
  v-show="toggPage.total > 0"
  :total="toggPage.total"
  :page.sync="toggPage.currentPage"
  :limit.sycn="toggPage.size"
  @pagination="togghandleCurrentChange"
 />

//因为业务需求封装的方法
queryImgList(){
	//给页面家了一个loading
	this.imgloading = true
     //获取分页总条数
     this.toggPage.total = this.dataList.length
     //页面初始化时显示的前十条数据
     this.imgList = dataList.slice(0,10)
     this.imgloading = false
},

togghandleCurrentChange(val){
	//如果不知道val可以在这打印
	console.log('val',val)
	this.imgloading = true
	this.toggPage.size = val.limit
	this.toggPage.currentPage = val.page
	//记得将数据先制空在进行赋值,否则你懂的
	this.imgList = []
	//获取当前页面的数据
	let minNum = (val.page - 1)*val.limit
    let maxNum = val.page*val.limit
    this.imgList = this.dataList.slice(minNum,maxNum)
    this.imgloading = false
}

queryBtn(){
	//之所以判断是否为空 -----如果用户没有输入直接点击就没必要再去执行下面代码
	if(this.queryImgValue){
		let img = []
		//循环该数据进行匹配
       	this.dataList.forEach(item => {
       	//如果name包含用户输入的名称将该条数据push到新数组中
          if(item.name.includes(this.queryImgValue)){
            img.push(item)
          }
        })
        //赋值给imgList,不要忘记还需要给查询的总条数赋值哟
        this.imglist = img
        this.toggPage.total = this.imglist.length
	}
}