微信小程序非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輪播圖效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。