欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue處理一千張圖片進(jìn)行分頁(yè)加載思路詳解

 更新時(shí)間:2023年02月17日 11:07:55   作者:憤怒的小前端  
開發(fā)過(guò)程中,如果后端一次性返回你1000多條圖片或數(shù)據(jù),那我們前端應(yīng)該怎么用什么思路去更好的渲染呢?這篇文章主要介紹了vue處理一千張圖片進(jìn)行分頁(yè)加載,需要的朋友可以參考下

vue處理一千張圖片進(jìn)行分頁(yè)加載

開發(fā)過(guò)程中,如果后端一次性返回你1000多條圖片或數(shù)據(jù),那我們前端應(yīng)該怎么用什么思路去更好的渲染呢?

第一種:我們可以使用分頁(yè)加載
第二種:我們可以進(jìn)行懶加載

那我們用第一種方法使用分頁(yè)加載的方法進(jìn)行渲染

總數(shù)據(jù):

在這里插入圖片描述

思路:

//dataList 在data中定義的數(shù)組來(lái)接收總數(shù)居
//imgList 在data中定義的數(shù)組來(lái)接受頁(yè)面顯示圖片的數(shù)組

  • 第一步:我們定義一個(gè)數(shù)組并且將1000條數(shù)據(jù)賦值給它
  • 第二步:我們先解決分頁(yè)的問(wèn)題,我們使用el-pagination組件先給該組件 的"total"、"page"、"limit"分別賦值
  • 第三步:頁(yè)面初始化的時(shí)候,我們首先加載dataList的前十條數(shù)據(jù)具體代碼如下: this.imgList = this.dataList.slice(0,10)
  • 第三步:當(dāng)我們點(diǎn)擊分頁(yè)時(shí),我們給el-pagination組件添加@pagination事件,在事件的方法中,我們可以獲取到當(dāng)前頁(yè)面以及當(dāng)前顯示條數(shù)

我們?cè)谶@個(gè)方法中需要給el-pagination組件中"size"、"page"參數(shù)賦值,然后在截取dataList在該頁(yè)面的數(shù)據(jù)并且給imgList數(shù)組進(jìn)行賦值。

   //獲取該頁(yè)的數(shù)據(jù) 
	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"
     :src="item.img"
     :key="index"
     :alt="item.name"
    />
   	<div class="title">{{ item.name }}</div>
  </div>
</el-card>

//分頁(yè)
<pagination
  v-show="toggPage.total > 0"
  :total="toggPage.total"
  :page.sync="toggPage.currentPage"
  :limit.sycn="toggPage.size"
  @pagination="togghandleCurrentChange"
 />
//因?yàn)闃I(yè)務(wù)需求封裝的方法
queryImgList(){
	//給頁(yè)面家了一個(gè)loading
	this.imgloading = true
     //獲取分頁(yè)總條數(shù)
     this.toggPage.total = this.dataList.length
     //頁(yè)面初始化時(shí)顯示的前十條數(shù)據(jù)
     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
	//記得將數(shù)據(jù)先制空在進(jìn)行賦值,否則你懂的
	this.imgList = []
	//獲取當(dāng)前頁(yè)面的數(shù)據(jù)
	let minNum = (val.page - 1)*val.limit
    let maxNum = val.page*val.limit
    this.imgList = this.dataList.slice(minNum,maxNum)
    this.imgloading = false
}

以上就可以完美結(jié)果該需求了,因?yàn)槲覀冃枨蟾鼜?fù)雜,刪了不少代碼

如果更想完美可以它加一個(gè)模糊查詢
我們以圖片名稱或者某個(gè)字段進(jìn)行查詢
思路:

queryImgValue //輸入框綁定的值
queryBtn // 查詢按鈕事件方法名稱

  • 第一步: 添加一個(gè)el-input給輸入框綁定一個(gè)v-model,然后添加el-button并且添加一個(gè)@click事件
  • 第二步: 點(diǎn)擊按鈕觸發(fā)queryBtn方法,在該方法中循環(huán)dataList然后根據(jù)循環(huán)的item.namequeryImgValue進(jìn)行匹配,如果包含輸入的值就push到一個(gè)新數(shù)組并且給this.imgList進(jìn)行賦值

具體代碼:

queryBtn(){
	//之所以判斷是否為空 -----如果用戶沒(méi)有輸入直接點(diǎn)擊就沒(méi)必要再去執(zhí)行下面代碼
	if(this.queryImgValue){
		let img = []
		//循環(huán)該數(shù)據(jù)進(jìn)行匹配
       	this.dataList.forEach(item => {
       	//如果name包含用戶輸入的名稱將該條數(shù)據(jù)push到新數(shù)組中
          if(item.name.includes(this.queryImgValue)){
            img.push(item)
          }
        })
        //賦值給imgList,不要忘記還需要給查詢的總條數(shù)賦值喲
        this.imglist = img
        this.toggPage.total = this.imglist.length
	}
}

以上就很完美啦!!!

到此這篇關(guān)于vue處理一千張圖片進(jìn)行分頁(yè)加載的文章就介紹到這了,更多相關(guān)vue圖片分頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue響應(yīng)式原理深入分析

    Vue響應(yīng)式原理深入分析

    響應(yīng)式就是當(dāng)對(duì)象本身(對(duì)象的增刪值)或者對(duì)象屬性(重新賦值)發(fā)生變化時(shí),將會(huì)運(yùn)行一些函數(shù),最常見(jiàn)的就是render函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3響應(yīng)式原理的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • vue中使用echarts繪制雙Y軸圖表時(shí)刻度沒(méi)有對(duì)齊的兩種解決方法(最新方案)

    vue中使用echarts繪制雙Y軸圖表時(shí)刻度沒(méi)有對(duì)齊的兩種解決方法(最新方案)

    這篇文章主要介紹了vue中使用echarts繪制雙Y軸圖表時(shí),刻度沒(méi)有對(duì)齊的兩種解決方法,主要原因是因?yàn)榭潭仍陲@示時(shí),分割段數(shù)不一樣,導(dǎo)致左右的刻度線不一致,不能重合在一起,下面給大家分享解決方法,需要的朋友可以參考下
    2024-03-03
  • vue學(xué)習(xí)筆記之作用域插槽實(shí)例分析

    vue學(xué)習(xí)筆記之作用域插槽實(shí)例分析

    這篇文章主要介紹了vue學(xué)習(xí)筆記之作用域插槽,結(jié)合實(shí)例形式分析了vue.js作用域插槽基本使用方法及操作注意事項(xiàng),需要的朋友可以參考下
    2020-02-02
  • vue靜態(tài)配置文件不進(jìn)行編譯的處理過(guò)程(在public中引入js)

    vue靜態(tài)配置文件不進(jìn)行編譯的處理過(guò)程(在public中引入js)

    這篇文章主要介紹了vue靜態(tài)配置文件不進(jìn)行編譯的處理過(guò)程(在public中引入js),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • vue3如何避免樣式污染的方法示例

    vue3如何避免樣式污染的方法示例

    本文主要介紹了vue3如何避免樣式污染的方法示例,使用scoped可以避免父組件的樣式滲透到子組件中,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2024-09-09
  • Vue ElementUi同時(shí)校驗(yàn)多個(gè)表單(巧用new promise)

    Vue ElementUi同時(shí)校驗(yàn)多個(gè)表單(巧用new promise)

    這篇文章主要介紹了巧用new promise實(shí)現(xiàn)Vue ElementUi同時(shí)校驗(yàn)多個(gè)表單功能,實(shí)現(xiàn)的方法有很多種,本文給大家?guī)?lái)的是一種比較完美的方案,需要的朋友可以參考下
    2018-06-06
  • vue 國(guó)際化 vue-i18n 雙語(yǔ)言 語(yǔ)言包

    vue 國(guó)際化 vue-i18n 雙語(yǔ)言 語(yǔ)言包

    這篇文章主要介紹了vue 國(guó)際化 vue-i18n 雙語(yǔ)言 語(yǔ)言包的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-06-06
  • vue中實(shí)現(xiàn)打印功能的幾種方法示例

    vue中實(shí)現(xiàn)打印功能的幾種方法示例

    這篇文章主要給大家介紹了關(guān)于vue中實(shí)現(xiàn)打印功能的幾種方法,打印功能在實(shí)際開發(fā)中非常常見(jiàn),通常我們需要將網(wǎng)頁(yè)中的某一部分或整個(gè)網(wǎng)頁(yè)打印出來(lái),需要的朋友可以參考下
    2023-09-09
  • VUE 自定義組件模板的方法詳解

    VUE 自定義組件模板的方法詳解

    這篇文章主要介紹了VUE 自定義組件模板的方法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js自定義組件模板的相關(guān)步驟與操作技巧,需要的朋友可以參考下
    2019-08-08
  • solid.js響應(yīng)式createSignal 源碼解析

    solid.js響應(yīng)式createSignal 源碼解析

    這篇文章主要為大家介紹了solid.js響應(yīng)式createSignal 源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09

最新評(píng)論