前言

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轮播图/堆叠轮播图/层叠轮播图相关推荐

小程序轮播图_微信小程序层叠轮播图
效果展示 Demo代码 wxml <view class="selection_cards" bindtouchstart="touchstart" bi ...
层叠轮播图、小程序3D轮播图、小程序轮播图、折叠轮播图、叠式轮播图、微信小程序叠式轮播图实现、小程序层叠轮播图swiper、Taro层叠轮播图、Taro叠式轮播图
好久没写博客了,最近这项目中有个叠式轮播的需求在网上找了一堆都没有自己想要的最开始被 TaroUI和小程序自带的swiper困扰一直以为是swpier的升级版试了好久也没改造成功干脆自 ...
微信小程序层叠轮播图、3D轮播图
接到个新需求,在微信小程序做层叠轮播,看了小程序的官方API没有swiper那么好用的方法,然后就想到之前拿原生js代码写的层叠轮播,其实一个道理.在swiper中显示多于1个的swiper-item ...
超详细轮播图，让你彻底明白轮播图！
超详细轮播图,让你彻底明白轮播图! 个人博客地址:http://www.zhsh666.xyz/ 刚开始学JavaScript时候很多新手都会尝试写一些简单的小项目,轮播图应该是写的最多的.但是很多时 ...
微信小程序之实现层叠轮播图的效果案例（前端学习收藏夹必备）
效果展示代码展示: WXML代码 <view class="selection_cards" bindtouchstart="touchstart" b ...
新增轮播图跳转web页面、轮播、推荐歌单数据存储（简易音乐七）
新增轮播图跳转web页面.轮播.推荐歌单数据存储( 简易音乐七) 关于效果图第一步,添加引用新增数据库实体类修改fragment代码新增WebActivity页面加载网页关于本篇主 ...
html轮播图水平传送带,12款 jquery轮播插件
Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独 ...
关于小红书的小程序不同数量的轮播图，展示不一样的轮播指示点的实现
用过小红书的人,应该注意到,小红书的详情页轮播模块做的有点花里胡哨,可谓天下产品一家亲.人家有的,我们也想有.于是在百度不到的情况下,只能自己想办法写类似的轮播指示点效果了. 先看想要实现的效果图: ...
轮播图实现方法一——层叠轮播图
轮播图的实现方法有很多种,在此主要介绍一种层叠轮播图的实现方式主要原理:将所有轮播图照片放在同一层,相互覆盖,通过JS控制当前那一张活跃在最顶端,实现图片轮播. 具体实现如下: HTML部分 < ...

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

前言

uniapp实现3D轮播图

操作步骤

bug修复

参考

【uniapp】3d轮播图/堆叠轮播图/层叠轮播图相关推荐

最新文章

热门文章