【ES6】vue中Swipe外掛處理資料應用於輪播分頁
阿新 • • 發佈:2018-12-16
JSON資料:
category_list_res: [ { name: '美食', url: 'http://p1.meituan.net/jungle/bd3ea637aeaa2fb6120b6938b5e468a13442.png', type: 'food' }, { name: '美團超市', url: 'http://p0.meituan.net/94.0.100/jungle/6b93ee96be3df7cf2bb6e661280b047d3975.png', type: 'supermarket' }, { name: '生鮮果蔬', url: 'http://p0.meituan.net/94.0.100/jungle/f33ed552c52b4466b6308a2c14dbc62d4882.png', type: 'fruit' }, { name: '下午茶', url: 'http://p0.meituan.net/94.0.100/jungle/af6cf63a5dfeb3557bf3099b03002ec34124.png', type: 'tea' }, { name: '正餐優選', url: 'http://p1.meituan.net/94.0.100/jungle/1543bbcb048218424e2420a6934e17b24236.png', type: 'dinner' }, { name: '漢堡披薩', url: 'http://p1.meituan.net/94.0.100/jungle/0e63b86b4ff14d214c1999a979fd21d14273.png', type: 'pizza' }, { name: '跑腿代購', url: 'http://p1.meituan.net/94.0.100/jungle/b40b7d72233f7a76dd9d97af40b4b8975414.png', type: 'buyOnSomebody' }, { name: '快餐簡餐', url: 'http://p0.meituan.net/94.0.100/jungle/deeea00bb23e4fae31ea154678c7a8003838.png', type: 'fastFood' }, { name: '地方菜', url: 'http://p1.meituan.net/94.0.100/jungle/b6033c2f9aa26cdf37ea24fb1346d2dc4690.png', type: 'localDish' }, { name: '炸雞美食', url: 'http://p0.meituan.net/94.0.100/jungle/0ce9a33a4accc536ac9e2d8d91951c924673.png', type: 'chicken' }, { name: '免配送費', url: 'http://p0.meituan.net/94.0.100/jungle/f5ef975cae40ecc1a21dae61f44575d59129.png', type: 'freeDeliver' } ],
資料處理函式
// 任何 Iterator 介面的物件,都可以用擴充套件運算子轉為真正的陣列。 let resArr = [...this.category_list_res]; console.log(resArr); let foodArr = []; //處理資料每8條為一組 for (let i = 0, j = 0; i < this.category_list_res.length; i += 8, j++) { foodArr[j] = resArr.splice(0, 8); console.log(foodArr[j]) } this.categoryList = foodArr;