前言

• uniapp
• 3d輪播圖
  

uniapp實現3D輪播圖

從uniapp插件市場下載插件：https://ext.dcloud.net.cn/plugin?id=243#detail

操作步驟

導入插件

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

設置參與輪播的圖片

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' }],} }

使用插件

<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輪播圖 -> 預覽地址

總結

以上是生活随笔為你收集整理的【uniapp】3d轮播图/堆叠轮播图/层叠轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。