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

目录 vue处理一千张图片进行分页加载 思路：

vue处理一千张图片进行分页加载

开发 过程中 ，如果 后端 一次性返回你1000多条图片或数据，那我们前端 应该 怎么用什么思路去更好的渲染呢？

第一种：我们可以使用分页加载
第二种：我们可以进行懒加载

那我们用第一种方法使用分页加载的方法进行渲染

总数据:

思路：

//dataList 在data中定义的数组来接收总数居
// img List 在data中定义的数组来接受页面显示图片的数组

第一步：我们定义一个数组并且将1000条数据赋值给它 第二步：我们先解决分页的问题，我们使用 el- pagination 组件先给该组件 的 " total "、"page"、"lim IT " 分别赋值 第三步：页面初始化的时候，我们首先加载dataList的前十条数据具体代码如下： this.imgList = this.dataList.slice(0,10) 第三步：当我们点击分页时，我们给 el-pa gin ation 组件添加 @pagination 事件，在事件的方法中，我们可以获取到当前页面以及当前显示条数

我们在这个方法中需要给 el-pagination 组件中 "size"、"page" 参数赋值，然后在截取dataList在该页面的数据并且给imgList数组进行赋值。

   //获取该页的数据 
	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 -i mg"
     :src="item.img"
     :key="index"
     :alt="item.n am e"
    />
   	<div class="title">{{ item.name }}</div>
  </div>
</el-card>

//分页
<pagination
   v-show ="toggPage.total > 0"
  :total="toggPage.total"
  :page.sync="toggPage. current Page"
  :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
}

以上就可以完美结果该需求了,因为我们需求更复杂,删了不少代码

如果更想完美可以它加一个模糊查询
我们以图片名称 或者 某个字段进行查询
思路:

queryImgValue //输入框绑定的值
query BT n // 查询按钮事件 方法名 称

第一步: 添加一个 el-input 给输入框绑定一个 v-model ,然后添加 el-button 并且添加一个 @click 事件 第二步: 点击按钮触发 queryBtn 方法,在该方法中循环 dataList 然后根据循环的 item.name 跟 queryImgValue 进行匹配,如果包含输入的值就 push 到一个新数组并且给 this.imgList 进行赋值

具体代码:

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

以上就很完美啦!!!

到此这篇关于vue处理一千张图片进行分页加载的 文章 就介绍到这了,更多相关vue图片分页内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章: vue中el-autocomplete支持分页上拉加载功能 vue实现纯前端表格滚动分页加载 vue实现分页加载效果 vue实现的上拉加载更多数据/分页功能示例 Vue.js实现无限加载与分页功能开发 Javascript vue.js表格分页，ajax异步加载数据 vue.js 表格分页ajax 异步加载数据

总结

以上是 为你收集整理的 vue处理一千张图片进行分页加载思路详解 全部内容，希望文章能够帮你解决 vue处理一千张图片进行分页加载思路详解 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于vue处理一千张图片进行分页加载思路详解的详细内容...