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

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

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

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

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

思路：

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

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

   //獲取該頁的數(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"><imgclass="screen-img":src="item.img":key="index":alt="item.name"/><div class="title">{{ item.name }}</div></div>
</el-card>//分頁
<paginationv-show="toggPage.total > 0":total="toggPage.total":page.sync="toggPage.currentPage":limit.sycn="toggPage.size"@pagination="togghandleCurrentChange"/>

//因?yàn)闃I(yè)務(wù)需求封裝的方法
queryImgList(){//給頁面家了一個(gè)loadingthis.imgloading = true//獲取分頁總條數(shù)this.toggPage.total = this.dataList.length//頁面初始化時(shí)顯示的前十條數(shù)據(jù)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//記得將數(shù)據(jù)先制空在進(jìn)行賦值,否則你懂的this.imgList = []//獲取當(dāng)前頁面的數(shù)據(jù)let minNum = (val.page - 1)*val.limitlet maxNum = val.page*val.limitthis.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(){//之所以判斷是否為空 -----如果用戶沒有輸入直接點(diǎn)擊就沒必要再去執(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 = imgthis.toggPage.total = this.imglist.length}
}

以上就很完美啦!!!