微信小程序实现非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轮播，请看这篇文章

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

相关推荐