vue處理一千張圖片進(jìn)行分頁(yè)加載思路詳解
vue處理一千張圖片進(jìn)行分頁(yè)加載
開(kāi)發(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-03
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),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03
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ǔ)言包的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
solid.js響應(yīng)式createSignal 源碼解析
這篇文章主要為大家介紹了solid.js響應(yīng)式createSignal 源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09

