vue處理一千張圖片進行分頁加載思路詳解
vue處理一千張圖片進行分頁加載
開發(fā)過程中,如果后端一次性返回你1000多條圖片或數(shù)據(jù),那我們前端應該怎么用什么思路去更好的渲染呢?
第一種:我們可以使用分頁加載
第二種:我們可以進行懶加載
那我們用第一種方法使用分頁加載的方法進行渲染
總數(shù)據(jù):

思路:
//dataList 在data中定義的數(shù)組來接收總數(shù)居
//imgList 在data中定義的數(shù)組來接受頁面顯示圖片的數(shù)組
- 第一步:我們定義一個數(shù)組并且將1000條數(shù)據(jù)賦值給它
- 第二步:我們先解決分頁的問題,我們使用
el-pagination組件先給該組件 的"total"、"page"、"limit"分別賦值 - 第三步:頁面初始化的時候,我們首先加載dataList的前十條數(shù)據(jù)具體代碼如下:
this.imgList = this.dataList.slice(0,10) - 第三步:當我們點擊分頁時,我們給
el-pagination組件添加@pagination事件,在事件的方法中,我們可以獲取到當前頁面以及當前顯示條數(shù)
我們在這個方法中需要給el-pagination組件中"size"、"page"參數(shù)賦值,然后在截取dataList在該頁面的數(shù)據(jù)并且給imgList數(shù)組進行賦值。
//獲取該頁的數(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>
//分頁
<pagination
v-show="toggPage.total > 0"
:total="toggPage.total"
:page.sync="toggPage.currentPage"
:limit.sycn="toggPage.size"
@pagination="togghandleCurrentChange"
/>//因為業(yè)務需求封裝的方法
queryImgList(){
//給頁面家了一個loading
this.imgloading = true
//獲取分頁總條數(shù)
this.toggPage.total = this.dataList.length
//頁面初始化時顯示的前十條數(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ù)先制空在進行賦值,否則你懂的
this.imgList = []
//獲取當前頁面的數(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
}以上就可以完美結果該需求了,因為我們需求更復雜,刪了不少代碼
如果更想完美可以它加一個模糊查詢
我們以圖片名稱或者某個字段進行查詢
思路:
queryImgValue //輸入框綁定的值
queryBtn // 查詢按鈕事件方法名稱
- 第一步: 添加一個
el-input給輸入框綁定一個v-model,然后添加el-button并且添加一個@click事件 - 第二步: 點擊按鈕觸發(fā)
queryBtn方法,在該方法中循環(huán)dataList然后根據(jù)循環(huán)的item.name跟queryImgValue進行匹配,如果包含輸入的值就push到一個新數(shù)組并且給this.imgList進行賦值
具體代碼:
queryBtn(){
//之所以判斷是否為空 -----如果用戶沒有輸入直接點擊就沒必要再去執(zhí)行下面代碼
if(this.queryImgValue){
let img = []
//循環(huán)該數(shù)據(jù)進行匹配
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
}
}以上就很完美啦!!!
到此這篇關于vue處理一千張圖片進行分頁加載的文章就介紹到這了,更多相關vue圖片分頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue中使用echarts繪制雙Y軸圖表時刻度沒有對齊的兩種解決方法(最新方案)
這篇文章主要介紹了vue中使用echarts繪制雙Y軸圖表時,刻度沒有對齊的兩種解決方法,主要原因是因為刻度在顯示時,分割段數(shù)不一樣,導致左右的刻度線不一致,不能重合在一起,下面給大家分享解決方法,需要的朋友可以參考下2024-03-03
vue靜態(tài)配置文件不進行編譯的處理過程(在public中引入js)
這篇文章主要介紹了vue靜態(tài)配置文件不進行編譯的處理過程(在public中引入js),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03
Vue ElementUi同時校驗多個表單(巧用new promise)
這篇文章主要介紹了巧用new promise實現(xiàn)Vue ElementUi同時校驗多個表單功能,實現(xiàn)的方法有很多種,本文給大家?guī)淼氖且环N比較完美的方案,需要的朋友可以參考下2018-06-06

