微信小程序3D轮播图实现

好久没有写博客了，前段时间换了家公司，做了两个多星期，完成了一款app的开发，公司没有app的需求了，我们几个移动端Android和IOS都转岗开发微信小程序，由于刚接触小程序不到两周，技术还是基于复制粘贴，h5以前也就看看，所以针对css样式和div之类的没有什么感觉，基本一切从0开始，好了，扯淡完毕-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

刚看了2天的小程序，咱们几个就开始上手开撸，不得不说微信的小程序封装的还是挺全面的，其实也就是间接的说很多东西都封装的比较死板，UI希望首页的banner实现各种形式的3D轮播图的效果，请看效果图

其实在app里面这种效果还是比较常见的，开源库也比较多，但是作为资深伸手党的我，居然没有搜索到实现3D轮播图的实例，好吧，只能自己开撸了，我的方式是基于原生的Swiper来实现的，配合previous-margin next-margin来实现左右两边的边框缩进效果，好了这只是第一步，第二部就是实现缩放的动画了效果了，我自己总结了两种方法，

第一种：通过css中控制选中和没有选中的swiper做监听，修改对应的css的样式，这时候需要对swpier做onChange监听，来改变选中的index角标，这个变量要写在data层里面，让直行img的时候能动态获取到xIndex的值，执行不同的css样式，这种方式通过设置img的高度来实现，选中设置100%的高度，没有选中的设置高度为90%，代码如下

 <view class='bannerWrap'><image class='imgBannerBack' src='../../static/img/back_banner.png' mode='scaleToFill'></image><swiper class='bannerSwiper' previous-margin="54rpx" next-margin='54rpx' indicator-dots="true" indicator-color='#B5B5B5' indicator-active-color='#fff' interval='3000' duration='500' bindchange='onChange' circular='true'><block wx:for="{{banner}}"><swiper-item><image class="{{index==xindex?'imageBanner':'imageBanner_small'}}" src="{{item}}" id='{{item.url}}' bindtap='imageClick'></image></swiper-item></block></swiper></view>.imageBanner {width: 100%;height: 100%;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;
}.imageBanner_small {width: 94%;height: 90%;margin-left: 20rpx;margin-right: 20rpx;position: absolute;bottom: 0;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx; }

第二种方法：

原理基本相同，只不过改变图片大小的时候利用的css的trasnform和trasnsition来实现界面动画的放大和缩小的过程的一个切换，具体代码就是css的样式做了一个切换

具体代码如下

.imageBanner {width: 100%;height: 100%;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;
}.imageBanner_small {height: 100%;transform: scale(0.9);transition: all 0.2s ease-in 0s;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;bottom: -13rpx;margin-left: -10rpx;position: absolute;}

下面看下具体实现的效果图吧

今天比较忙，等稍微闲点的时候将对应的demo会上传供各位大佬参考，刚刚做小程序，实现的效果可能比较low，但是能解决目前遇到的问题，如果哪位大佬有更加好的实现方式，希望不吝赐教！

终于在一位兄弟的督促下把demo上传了，贴上地址

https://github.com/WinWang/WeChatBanner/tree/master

微信小程序3D轮播图实现相关推荐

微信小程序3D轮播图
一.最终效果二.利用原生swiper制作3D效果 1.需要注意的几个API previous-margin:说白了就是前一张图片能露多少. next-margin:说白了就是后一张图片能露多少. c ...
微信小程序实现轮播图（超简单）
Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv.span等)写前端代码,也可以用微信小程序语法写(view.swiper标签),然后npm run dev编译后,在微信开发者工 ...
php轮播怎么调整图片大小,微信小程序内轮播图怎样设置成自适应高度
这次给大家带来微信小程序内轮播图怎样设置成自适应高度,微信小程序内轮播图怎设置成自适应高度的注意事项有哪些,下面就是实战案例,一起来看一下. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前 ...
微信小程序swiper图片尺寸_微信小程序 swiper 轮播图高度自适应
微信小程序 swiper 轮播图高度自适应发布时间:2018-07-20 15:34, 浏览次数:588 , 标签: swiper 小程序中使用swiper 组件 ,实现轮播图高度自适应效果. 先 ...
微信小程序---swiper轮播图组件
微信小程序-swiper轮播图组件在components中新建文件夹swiper components/swiper/swiper.wxml <!--components/swiper/swi ...
微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
移动端h5 层叠轮播图，uniapp微信小程序层叠轮播图，3d轮播图
如果你的项目使用的是jquery的话推荐使用swiper 进行做 https://www.swiper.com.cn/usage/index.html 如果用的是vue3开发的纯h5项目的话,推荐 ...
层叠轮播图、小程序3D轮播图、小程序轮播图、折叠轮播图、叠式轮播图、微信小程序叠式轮播图实现、小程序层叠轮播图swiper、Taro层叠轮播图、Taro叠式轮播图
好久没写博客了,最近这项目中有个叠式轮播的需求在网上找了一堆都没有自己想要的最开始被 TaroUI和小程序自带的swiper困扰一直以为是swpier的升级版试了好久也没改造成功干脆自 ...
微信小程序层叠轮播图、3D轮播图
接到个新需求,在微信小程序做层叠轮播,看了小程序的官方API没有swiper那么好用的方法,然后就想到之前拿原生js代码写的层叠轮播,其实一个道理.在swiper中显示多于1个的swiper-item ...

微信小程序3D轮播图实现

微信小程序3D轮播图实现相关推荐

最新文章

热门文章