微信小程序层叠轮播图、3D轮播图

接到个新需求，在微信小程序做层叠轮播，看了小程序的官方API没有swiper那么好用的方法，然后就想到之前拿原生js代码写的层叠轮播，其实一个道理。在swiper中显示多于1个的swiper-item，然后每个swiper-item中间有一些间距，然后把swiper-item中的内容设成居中，最后将active的swiper-item放大，就做成了层叠轮播。

效果图

wxml代码

<view class='list'><swiper indicator-dots="{{true}}" autoplay="{{false}}" previous-margin="{{'140rpx'}}" next-margin="{{'140rpx'}}" bindchange="swiperChange"><block wx:for="{{imgUrls}}" wx:key="{{index}}"><swiper-item><image src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}"/></swiper-item></block></swiper>
</view>

wxss代码

swiper{width: 750rpx;height: 900rpx;
}
swiper-item{padding-top: 100rpx;
}
image{width: 375rpx;height: 667rpx;position: absolute;left: 50%;margin-left: -188rpx;
}
image.active{transform: scale(1.14);transition:all .2s ease-in 0s;
}

js代码

Page({data: {imgUrls: ['file/mall/activity/aa-1.jpg','file/mall/activity/aa-2.jpg','file/mall/activity/aa-3.jpg'],swiperIndex: 0},swiperChange(e) {this.setData({swiperIndex: e.detail.current})}
})

微信小程序层叠轮播图、3D轮播图相关推荐

微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下效果如图 WXML WXSS .Carousel{ margin-top: 49px; background-color ...
绑定bindchange事件的微信小程序swiper闪烁，抖动问题解决，（将微信小程序切换到后台一段时间，再打开微信小程序，会出现疯狂循环轮播，造成抖动现象）
绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象) 参考文章: (1)绑定bindchang ...
小程序轮播图_微信小程序层叠轮播图
效果展示 Demo代码 wxml <view class="selection_cards" bindtouchstart="touchstart" bi ...
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）
开始前,请先完成首页的开发,详见 [微信小程序-原生开发]实用教程05-首页(含自定义调试模式.插入图片.图文排版.底部留白.添加本地图片) https://blog.csdn.net/weixin_ ...
微信小程序云开发快速入门手册-告别切图仔的时刻到了
文章很长,建议先收藏,有充分的时间再学习,没有小程序基础的,也阔以先收藏哦. 本文章会手把手带各位小伙伴入门微信小程序云开发,因为我还不是全栈工程师,所以不是特别清楚前后端分离模式下,后端工程师需 ...
【uni-app】只支持在微信小程序运行的导入外部3d模型
1.解决问题 uniapp 导入3d模型,在微信小程序端运行.只支持在微信小程序端使用,若要支持 h5 和 APP端,可以查看这篇,点击这里只导入了3d模型,未设置让模型动. 2.导入模型格式 gl ...
微信小程序之图表系列——canvas绘制饼状图，带点击效果
一图胜千言,相信很多开发者都没有绕开过图表制作这个坑,在小程序中也是,当然可以用第三方echart等制图插件来做,但小程序要求代码量最大12M,还得分好几个包,一个echart插件就将近1M,要是只做 ...
微信小程序中这么简单的设置页面背景图及字体颜色的方法，你还不会？
在微信小程序中,我们不免的要设置背景图片和字体颜色. 那怎么样才能做到简单的设置背景图片和字体颜色呢? 话不多说,直接开讲首先先说怎么设置页面背景图片: 这是博主准备的照片. 下面是在wxml中的代 ...
微信小程序-仿淘宝(附真机测试图)（持续更新中。。。）
醉前端微信小程序已开始公测, 醉前端的开发热情依然不减... 这是仿手机淘宝做的微信小程序,目的在于享受开发,学习小程序,欢迎大家批评指正. demo资源地址:demo gihub传送门 tip: ...

微信小程序层叠轮播图、3D轮播图

效果图

wxml代码

wxss代码

js代码

微信小程序层叠轮播图、3D轮播图相关推荐

最新文章

热门文章