微信小程序實現非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輪播，請看這篇文章