【uniapp】3d轮播图/堆叠轮播图/层叠轮播图

前言

• uniapp
• 3d轮播图
  

uniapp实现3D轮播图

从uniapp插件市场下载插件：https://ext.dcloud.net.cn/plugin?id=243#detail

操作步骤

1. 导入插件

<script>
	import currySwiper from "@/components/curry-swiper/curry-swiper.vue"
	import currySlide from "@/components/curry-swiper/curry-slide.vue"
	
	export default {
		components: {
			currySwiper,
			currySlide,
		},
	}
</script>

2. 设置参与轮播的图片

data() {
  return {
    sceneList: [
        { img: 'https://2fz1.me/img/phaser.jpg' },
        { img: 'https://2fz1.me/img/css3.png' },
        { img: 'https://2fz1.me/img/nodemodules.jpg' },
        { img: 'https://2fz1.me/img/js.jpg' }
      ],
  }
}

3. 使用插件

<curry-swiper
  :width="195"
  :space="112"
  :inverseScaling="400"
  :height="107"
  :perspective="14"
  :border="3"
  :count="10"
  ref="swiper"
>
  <curry-slide v-for="(slide, i) in sceneList" :index="i" :key="i">
    <template slot-scope="{ index, isCurrent, leftIndex, rightIndex }">
      <img
        :data-index="index"
        :class="{ current: isCurrent, onLeft: (leftIndex >= 0), onRight: (rightIndex >= 0) }"
        :src="slide.img" />
    </template>
  </curry-slide>
</curry-swiper>

bug修复

[Vue warn]: Error in render: "TypeError: Cannot read property 'forEach' of undefined"

在 curry-slide.vue 文件中，找到下面的代码：

  data () {
    return {
      parent: this.$parent,
      styles: {},
      zIndex: 999
    }
  },

修改为：

  data () {
    return {
      parent: this.$parent.$parent.$parent,
      styles: {},
      zIndex: 999
    }
  },

参考

层叠轮播图的简易制作
vue.js层叠轮播
用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
vue 3D旋转木马轮播图
插件-3D轮播图 -> 预览地址