快捷導(dǎo)航

Vue組件實現(xiàn)景深卡片輪播示例

更新時間：2022年07月25日 11:01:33 作者：紫衣小生

這篇文章主要為大家介紹了Vue組件實現(xiàn)景深卡片輪播示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

朋友的朋友做了個首頁，首頁用到一個卡片輪播，大概就是這個樣子的：

第一版他們是開發(fā)出來了，但是各種bug，希望我?guī)兔Ω囊幌隆?/p>

看完代碼以后，發(fā)現(xiàn)他們整合了一個縫合怪出來，各個樓層都是從其他地方 CV 過來的，而且各個樓層引用了 n 多個js 和 css 文件，看了一下效果以后，覺得改他的東西確實比重新開發(fā)一個要麻煩的多得多，所以就重新寫了一下。

在此記錄一下，以便于后續(xù)復(fù)用。

需求拆解

初始化渲染5個容器，用來承載圖片和標(biāo)題，按照景深的效果排列，越靠近自己越大。
點擊中間一塊的左邊的整體向右旋轉(zhuǎn)一格，點擊右邊的向左旋轉(zhuǎn)一格，點擊中間的沒有效果。
中間一項顯示 content 和查看更多按鈕，其他不顯示。

開發(fā)思路(vue2)

景深效果可以選擇使用 css3 的轉(zhuǎn)換來制作，通過對每個容器進行不通比例的縮放來實現(xiàn)5個容器大小不一致的效果。
因為使用到了css3的轉(zhuǎn)換，就需要用到過渡，動畫效果就使用 transition-group 來實現(xiàn)。
至此就可以輪播就可以滾動起來了，只需要給5個容器循環(huán)賦值css樣式，就可以實現(xiàn)縮放和位置轉(zhuǎn)換，結(jié)合漸變，就成了一個循環(huán)動畫效果。
點擊事件，一開始的思路是通過獲取點擊事件中的鼠標(biāo)的坐標(biāo)，如果在左半個屏幕就走左邊的邏輯，但是頁面有個最小寬度 1280，當(dāng)分辨率被拖動的時候就不行了，所以pass掉了。最后選擇的方案是，給容器一套下標(biāo)(_id)的同時全局聲明一個變量用來記錄當(dāng)前展示的容器的下標(biāo)，每次點擊都要和展示項作比較，通過比較結(jié)果來確定左右邏輯。
思維發(fā)散：
- 可以擴展為7個甚至更多容器的輪播
- 擴展為n個容器，但是只顯示5個的輪播
- 景深效果以及動畫效果改變
- ...

開發(fā)過程

首先是html+css部分，這部分很簡單，而且很普通。

寫 5 個div，每個都用絕對定位的方式鋪滿整個屏幕，每個寬度都是 20%。
綁定各數(shù)據(jù)，并用幾個狀態(tài)值來控制 content 的顯示隱藏，以及當(dāng)前展示項。

代碼如下：

<script>
// 引入圖片資源
import loop1 from '@assets/images/loop1.png';
import loop2 from '@assets/images/loop2.png';
import loop3 from '@assets/images/loop3.png';
import loop4 from '@assets/images/loop4.png';
import loop5 from '@assets/images/loop5.png';
/**
 * 根據(jù) id 獲取下標(biāo)
 * @params arr object[]
 * @params id number
 * @result number n>=-1
 */
const findIdxById = (arr, id) => {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === id) {
      return i;
    }
  }
  return -1;
};
export default {
  data() {
    return {
      // 輪播數(shù)據(jù)
      baseData: [
        {
          desc:
            '可折疊式智能移動影院Royle-X展現(xiàn)了驚人的高科技技術(shù)和全球首創(chuàng)的可折疊設(shè)計，配備了柔宇科技自助研發(fā)的首款智能移動顯示操作系統(tǒng)，設(shè)計非常人性化?？赡軙烧郫B計自助研發(fā)的首款智能移動顯示操作系統(tǒng)，設(shè)計非常人性化?？赡軙烧圩灾邪l(fā)的首款智能移動顯示操作系統(tǒng)，設(shè)計非常人性化。可能會可折自助研發(fā)的首款智能移動顯示操作系統(tǒng)，設(shè)計非常人性化?？赡軙烧?,
          title: '這里是標(biāo)題',
          cover: loop1,
        },
        {
          desc:
            '可折疊式智能移動影院Royle-X展現(xiàn)了驚人的高科技技術(shù)和全球首創(chuàng)的可折疊設(shè)計，配備了柔宇科技自助研發(fā)的首款智能移動顯示操作系統(tǒng)，設(shè)計非常人性化?？赡軙烧郫B計自助研發(fā)的首款智能移動顯示操作系統(tǒng)，設(shè)計非常人性化?？赡軙烧圩灾邪l(fā)的首款智能移動顯示操作系統(tǒng)，設(shè)計非常人性化?？赡軙烧圩灾邪l(fā)的首款智能移動顯示操作系統(tǒng)，設(shè)計非常人性化?？赡軙烧?,
          title: '這里是標(biāo)題',
          cover: loop2,
        },
        {
          desc:
            '可折疊式智能移動影院Royle-X展現(xiàn)了驚人的高科技技術(shù)和全球首創(chuàng)的可折疊設(shè)計，配備了柔宇科技自助研發(fā)的首款智能移動顯示操作系統(tǒng)，設(shè)計非常人性化?？赡軙烧郫B計自助研發(fā)的首款智能移動顯示操作系統(tǒng)，設(shè)計非常人性化。可能會可折自助研發(fā)的首款智能移動顯示操作系統(tǒng)，設(shè)計非常人性化?？赡軙烧圩灾邪l(fā)的首款智能移動顯示操作系統(tǒng)，設(shè)計非常人性化。可能會可折',
          title: '這里是標(biāo)題',
          cover: loop3,
        },
        {
          desc:
            '可折疊式智能移動影院Royle-X展現(xiàn)了驚人的高科技技術(shù)和全球首創(chuàng)的可折疊設(shè)計，配備了柔宇科技自助研發(fā)的首款智能移動顯示操作系統(tǒng)，設(shè)計非常人性化。可能會可折疊計自助研發(fā)的首款智能移動顯示操作系統(tǒng)，設(shè)計非常人性化?？赡軙烧圩灾邪l(fā)的首款智能移動顯示操作系統(tǒng)，設(shè)計非常人性化。可能會可折自助研發(fā)的首款智能移動顯示操作系統(tǒng)，設(shè)計非常人性化?？赡軙烧?,
          title: '這里是標(biāo)題',
          cover: loop4,
        },
        {
          desc:
            '可折疊式智能移動影院Royle-X展現(xiàn)了驚人的高科技技術(shù)和全球首創(chuàng)的可折疊設(shè)計，配備了柔宇科技自助研發(fā)的首款智能移動顯示操作系統(tǒng)，設(shè)計非常人性化?？赡軙烧郫B計自助研發(fā)的首款智能移動顯示操作系統(tǒng)，設(shè)計非常人性化?？赡軙烧圩灾邪l(fā)的首款智能移動顯示操作系統(tǒng)，設(shè)計非常人性化?？赡軙烧圩灾邪l(fā)的首款智能移動顯示操作系統(tǒng)，設(shè)計非常人性化?？赡軙烧?,
          title: '這里是標(biāo)題',
          cover: loop5,
        },
      ],
      // 當(dāng)前展示項
      loopCenterIdx: 2,
      // 輪播樣式模板，用來循環(huán)賦值給 容器
      loopModules: [
        {
          loopIdx: 0,
          style: {
            'z-index': 7,
            background: '#fff',
            transform: `scale(${1})`,
            left: 'calc(100% / 5 * 0)',
            height: '320px',
            opacity: 0.8,
          },
        },
        {
          loopIdx: 1,
          style: {
            'z-index': 8,
            transform: `scale(${1.4})`,
            background: '#fff',
            left: 'calc(100% / 5 * .9)',
            height: '320px',
            opacity: 0.9,
          },
        },
        {
          loopIdx: 2,
          style: {
            transform: `scale(${1.7})`,
            'z-index': 9,
            background: '#fff',
            left: 'calc(100% / 5 * 2)',
            opacity: 1,
            'box-shadow': '0 0 5px #ccc',
            height: '370px',
          },
        },
        {
          loopIdx: 3,
          style: {
            transform: `scale(${1.4})`,
            'z-index': 8,
            background: '#fff',
            left: 'calc(100% / 5 * 3.1)',
            opacity: 0.9,
            height: '320px',
          },
        },
        {
          loopIdx: 4,
          style: {
            'z-index': 7,
            transform: `scale(${1})`,
            background: '#fff',
            left: 'calc(100% / 5 * 4)',
            height: '320px',
            opacity: 0.8,
          },
        },
      ],
    };
  },
  created(){
    // todo Ajax ...
  },  
  mounted() {
    // 初始化輪播
    this.initLoop();
    console.log('centerIdx = ', this.loopCenterIdx);
  },
  methods: {
    // 初始化輪播
    initLoop() {
      this.loopModules = this.loopModules.map((item, idx) => {
        item.desc = this.baseData[idx];
        return item;
      });
      console.log(this.loopModules);
    },
    // 下一張
    handleNext() {
      this.loopCenterIdx = this.loopCenterIdx + 1 > 4 ? 0 : this.loopCenterIdx + 1;
      this.loopModules = this.loopModules.map((item, idx) => {
        item.desc = this.baseData[idx];
        return item;
      });
      this.loopModules.unshift(this.loopModules.pop());
    },
    // 上一張
    handleLast() {
      this.loopCenterIdx = this.loopCenterIdx - 1 < 0 ? 4 : this.loopCenterIdx - 1;
      this.loopModules = this.loopModules.map((item, idx) => {
        item.desc = this.baseData[idx];
        return item;
      });
      this.loopModules.push(this.loopModules.shift());
    },
    // 點擊容器
    handleLoop(checkId) {
      console.log('checkId = ', checkId, ', loopCenterIdx = ', this.loopCenterIdx);
      // 當(dāng)前項
      if (checkId === this.loopCenterIdx) {
        return;
      }
      if (checkId > this.loopCenterIdx) {
        if (this.loopCenterIdx === 0 && checkId === 4) {
          return this.handleLast(checkId);
        } else {
          return this.handleNext(checkId);
        }
      }
      if (checkId < this.loopCenterIdx) {
        if (checkId === 0 && this.loopCenterIdx === 4) {
          return this.handleNext(checkId);
        } else {
          return this.handleLast(checkId);
        }
      }
    },
  },
};
</script>

js代碼里面有兩個地方需要注意的：

可以看到在上一張和下一張對應(yīng)的方法里面，有兩個一行代碼。其作用就是讓5個容器轉(zhuǎn)起來。

this.loopModules.unshift(this.loopModules.pop());
// [1,2,3,4] =&gt; [2,3,4,1]
this.loopModules.push(this.loopModules.shift());
// [1,2,3,4] =&gt; [4,1,2,3]

在 handleLoop 方法中，需要注意展示項為第一個和最后一個的時候，和正常判斷邏輯相反。

后記

輪播作為一個日常開發(fā)中最常見的組件，想必每一個前端都在學(xué)習(xí)js的時候?qū)⑺鳛橐粋€很有意思的 demo 練過手，而景深卡片輪播算是比基礎(chǔ)輪播稍微難一點的效果了。

這個組件值得記錄下來的是把數(shù)據(jù)驅(qū)動視圖的思路更好的進行了一次展示，這也是基于框架開發(fā)和原生開發(fā)的一個重要的轉(zhuǎn)變。如果在 jquery 中，可能會用 $(selector).animate() 去控制動畫效果，原生 js 中也會封裝一個類似 animate() 的方式去逐幀的實現(xiàn)一系列的動畫，而在 vue 中，直接修改數(shù)據(jù)的順序，或者修改數(shù)據(jù)值，就讓 dom 動起來了。

數(shù)據(jù)驅(qū)動視圖的思路下，我們就不必去關(guān)注視圖的變化，也不用頻繁的去操作dom元素，只需考慮清除一組可以控制視圖變化的鏈路就好了。例如：分頁組件只需要關(guān)注當(dāng)前頁碼和每頁顯示數(shù)量，表格組件只需要關(guān)注列數(shù)據(jù)的變化等等。其他的部分框架已經(jīng)做了很多。

路還很長，每走一步都有新感悟！

以上就是Vue組件實現(xiàn)景深卡片輪播示例的詳細(xì)內(nèi)容，更多關(guān)于Vue景深卡片輪播的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: