Vue组件实现景深卡片轮播示例

<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';

const findIdxById = (arr, id) => {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === id) {
      return i;
    }
  }
  return -1;
};
export default {
  data() {
    return {
      // 轮播数据
      baseData: [
        {
          desc:
            '可折叠式智能移动影院Royle-X展现了惊人的高科技技术和全球首创的可折叠设计，配备了柔宇科技自助研发的首款智能移动显示操作系统，设计非常人性化。可能会可折叠计自助研发的首款智能移动显示操作系统，设计非常人性化。可能会可折自助研发的首款智能移动显示操作系统，设计非常人性化。可能会可折自助研发的首款智能移动显示操作系统，设计非常人性化。可能会可折',
          title: '这里是标题',
          cover: loop1,
        },
        {
          desc:
            '可折叠式智能移动影院Royle-X展现了惊人的高科技技术和全球首创的可折叠设计，配备了柔宇科技自助研发的首款智能移动显示操作系统，设计非常人性化。可能会可折叠计自助研发的首款智能移动显示操作系统，设计非常人性化。可能会可折自助研发的首款智能移动显示操作系统，设计非常人性化。可能会可折自助研发的首款智能移动显示操作系统，设计非常人性化。可能会可折',
          title: '这里是标题',
          cover: loop2,
        },
        {
          desc:
            '可折叠式智能移动影院Royle-X展现了惊人的高科技技术和全球首创的可折叠设计，配备了柔宇科技自助研发的首款智能移动显示操作系统，设计非常人性化。可能会可折叠计自助研发的首款智能移动显示操作系统，设计非常人性化。可能会可折自助研发的首款智能移动显示操作系统，设计非常人性化。可能会可折自助研发的首款智能移动显示操作系统，设计非常人性化。可能会可折',
          title: '这里是标题',
          cover: loop3,
        },
        {
          desc:
            '可折叠式智能移动影院Royle-X展现了惊人的高科技技术和全球首创的可折叠设计，配备了柔宇科技自助研发的首款智能移动显示操作系统，设计非常人性化。可能会可折叠计自助研发的首款智能移动显示操作系统，设计非常人性化。可能会可折自助研发的首款智能移动显示操作系统，设计非常人性化。可能会可折自助研发的首款智能移动显示操作系统，设计非常人性化。可能会可折',
          title: '这里是标题',
          cover: loop4,
        },
        {
          desc:
            '可折叠式智能移动影院Royle-X展现了惊人的高科技技术和全球首创的可折叠设计，配备了柔宇科技自助研发的首款智能移动显示操作系统，设计非常人性化。可能会可折叠计自助研发的首款智能移动显示操作系统，设计非常人性化。可能会可折自助研发的首款智能移动显示操作系统，设计非常人性化。可能会可折自助研发的首款智能移动显示操作系统，设计非常人性化。可能会可折',
          title: '这里是标题',
          cover: loop5,
        },
      ],
      // 当前展示项
      loopCenterIdx: 2,
      // 轮播样式模板，用来循环赋值给 容器
      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);
      // 当前项
      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>

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