网站集约化建设方案,跟我一起学做网站,上海网站建设免,教育网站的建设vue处理一千张图片进行分页加载
开发过程中#xff0c;如果后端一次性返回你1000多条图片或数据#xff0c;那我们前端应该怎么用什么思路去更好的渲染呢#xff1f;
第一种#xff1a;我们可以使用分页加载
第二种#xff1a;我们可以进行懒加载那我们用第一种方法使用…vue处理一千张图片进行分页加载
开发过程中如果后端一次性返回你1000多条图片或数据那我们前端应该怎么用什么思路去更好的渲染呢
第一种我们可以使用分页加载
第二种我们可以进行懒加载那我们用第一种方法使用分页加载的方法进行渲染
总数据:
思路
//dataList 在data中定义的数组来接收总数居
//imgList 在data中定义的数组来接受页面显示图片的数组第一步我们定义一个数组并且将1000条数据赋值给它第二步我们先解决分页的问题我们使用el-pagination组件先给该组件 的total、page、limit分别赋值第三步页面初始化的时候我们首先加载dataList的前十条数据具体代码如下 this.imgList this.dataList.slice(0,10)第三步当我们点击分页时我们给el-pagination组件添加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 classbox-cardv-for(item,index) in imglist:keyitemshadowhoverdiv classbox-card-divimgclassscreen-img:srcitem.img:keyindex:altitem.name/div classtitle{{ item.name }}/div/div
/el-card//分页
paginationv-showtoggPage.total 0:totaltoggPage.total:page.synctoggPage.currentPage:limit.sycntoggPage.sizepaginationtogghandleCurrentChange///因为业务需求封装的方法
queryImgList(){//给页面家了一个loadingthis.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 truethis.toggPage.size val.limitthis.toggPage.currentPage val.page//记得将数据先制空在进行赋值,否则你懂的this.imgList []//获取当前页面的数据let minNum (val.page - 1)*val.limitlet maxNum val.page*val.limitthis.imgList this.dataList.slice(minNum,maxNum)this.imgloading false
}以上就可以完美结果该需求了,因为我们需求更复杂,删了不少代码
如果更想完美可以它加一个模糊查询 我们以图片名称或者某个字段进行查询 思路: queryImgValue //输入框绑定的值 queryBtn // 查询按钮事件方法名称 第一步: 添加一个el-input给输入框绑定一个v-model,然后添加el-button并且添加一个click事件第二步: 点击按钮触发queryBtn方法,在该方法中循环dataList然后根据循环的item.name跟queryImgValue进行匹配,如果包含输入的值就push到一个新数组并且给this.imgList进行赋值
具体代码:
queryBtn(){//之所以判断是否为空 -----如果用户没有输入直接点击就没必要再去执行下面代码if(this.queryImgValue){let img []//循环该数据进行匹配this.dataList.forEach(item {//如果name包含用户输入的名称将该条数据push到新数组中if(item.name.includes(this.queryImgValue)){img.push(item)}})//赋值给imgList,不要忘记还需要给查询的总条数赋值哟this.imglist imgthis.toggPage.total this.imglist.length}
}以上就很完美啦!!!
