本文实例讲述了微信小程序非swiper组件实现的自定义伪3D轮播图效果。分享给大家供大家参考，具体如下：

效果如下：

我用了很笨的方法实现的，大致就是：

1.当前点击的div（view）如果前后都有内容，那么，当前div（view）就设置到中间，前一个就设置到左边，前一个的前面所有全部设置到最左边，后面一个设置到右边，后面所有设置到最右边

2.当前点击的div（view）如果前面无内容，即第一个，那么，当前div（view）设置到中间，后面一个设置到右边，后面所有设置到最右边

3.当前点击的div（view）如果后面无内容，即最后一个，那么，当前div（view）设置到中间，前面一个设置到左边，前面所有设置到最左边

1.html

<view class='idx-content'> <view class='idx-swiper'> <view class='idx-cswp {{item.swpClass}}' wx:for="{{swiperList}}" wx:key="" bindtap="swpBtn" data-index="{{index}}"> <image src='{{item.imgsrc}}' mode='widthFix'></image> <view class='swp-title' hidden="{{item.swpClass!=='swp-center'}}"> <view class='swp-btime'>{{item.time}}</view> <view class='swp-bname'>{{item.bname}}</view> </view> </view> </view></view>

注：swp-title是标题，用hidden替代wx:if是因为会频繁切换。

2.wxss

.idx-content { overflow: hidden; padding: 0 40rpx;}.idx-content .idx-swiper { position: relative; margin: 40rpx 0; padding-bottom: 100%;}.idx-content .idx-swiper .idx-cswp { width: 70%; height: 100%; position: absolute; top: 0; border-radius: 6px;}.idx-content .idx-swiper .idx-cswp image { width: 100%; max-height: 600rpx;}.idx-content .idx-swiper .idx-cswp .swp-title .swp-btime { text-align: center; font-size: 28rpx;}.idx-content .idx-swiper .idx-cswp .swp-title .swp-bname { text-align: center; font-size: 24rpx;}.swp-left { transition: all .3s ease; transform: scale(0.8); left: -55%;}.swp-center { left: 15%; transition: all .3s ease; transform: scale(1);}.swp-right { transition: all .3s ease; transform: scale(0.8); left: 85%;}.swp-rightNo { transition: all .3s ease; left: 150%;}.swp-leftNo { transition: all .3s ease; left: -150%;}

3.js

Page({ data:{ swiperList: [{//除了1，2之外，其它的swpClass都是swp-rightNo aurl:"../start/start", swpClass:"swp-center", time:"2018年3月下11", bname:"2018全球十大突破技术11", imgsrc:"../../public/img/swiper.png" }, { aurl:"#", swpClass:"swp-right", time: "2018年3月下22", bname: "2018全球十大突破技术22", imgsrc: "../../public/img/swiper2.png" }, { aurl:"#", swpClass:"swp-rightNo", time: "2018年3月下33", bname: "2018全球十大突破技术33", imgsrc: "../../public/img/swiper3.png" }] }, swpBtn:function(e){ var swp = this.data.swiperList; var max=swp.length; var idx=e.currentTarget.dataset.index; var prev = swp[idx-1];//前一个 var next = swp[idx+1];//后一个 var curView=swp[idx];//当前 if (curView.swpClass ==='swp-center'){//如果当前是在中间的，即可跳转 wx.navigateTo({ url: curView.aurl, }) } if(prev){//如果当前的前面有 if (next) {//当前的后面有 next.swpClass = "swp-right"; } prev.swpClass ="swp-left"; curView.swpClass = "swp-center"; for (var i =0; i < idx; i++) { //当前前一个的前面所有 swp[i].swpClass = 'swp-leftNo' } } if(next){//如果当前的后面有 if(prev){//当前的前面有 prev.swpClass = "swp-left"; } curView.swpClass = "swp-center"; next.swpClass = "swp-right"; for (var i = (idx + 2); i < max; i++) {//当前后一个的后面所有 swp[i].swpClass = 'swp-rightNo' } }else{ prev.swpClass = "swp-left"; curView.swpClass = "swp-center"; } this.setData({ swiperList: swp }) },})

如果要实现滑动切换，可用 bindtouchstart 和 bindtouchend 来实现。 思路大概是滑动了一定距离之后就添加class。

还有一篇更简单的：用swiper来实现的3d轮播

希望本文所述对大家微信小程序开发有所帮助。