1. 程式人生 > >【ES6】vue中Swipe外掛處理資料應用於輪播分頁

【ES6】vue中Swipe外掛處理資料應用於輪播分頁

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;