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.name
跟queryImgValue
進(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中使用echarts繪制雙Y軸圖表時(shí)刻度沒(méi)有對(duì)齊的兩種解決方法(最新方案)
這篇文章主要介紹了vue中使用echarts繪制雙Y軸圖表時(shí),刻度沒(méi)有對(duì)齊的兩種解決方法,主要原因是因?yàn)榭潭仍陲@示時(shí),分割段數(shù)不一樣,導(dǎo)致左右的刻度線不一致,不能重合在一起,下面給大家分享解決方法,需要的朋友可以參考下2024-03-03vue學(xué)習(xí)筆記之作用域插槽實(shí)例分析
這篇文章主要介紹了vue學(xué)習(xí)筆記之作用域插槽,結(jié)合實(shí)例形式分析了vue.js作用域插槽基本使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02vue靜態(tài)配置文件不進(jìn)行編譯的處理過(guò)程(在public中引入js)
這篇文章主要介紹了vue靜態(tài)配置文件不進(jìn)行編譯的處理過(guò)程(在public中引入js),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03Vue 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-06vue 國(guó)際化 vue-i18n 雙語(yǔ)言 語(yǔ)言包
這篇文章主要介紹了vue 國(guó)際化 vue-i18n 雙語(yǔ)言 語(yǔ)言包的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06solid.js響應(yīng)式createSignal 源碼解析
這篇文章主要為大家介紹了solid.js響應(yīng)式createSignal 源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09