本文實例講述了微信小程序非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。
希望本文所述對大家微信小程序開發有所幫助。
新聞熱點
疑難解答
