微信小程序非swiper组件实现的自定义伪3D轮播图效果示例

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

本文实例讲述了微信小程序非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轮播

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