微信小程序非swiper組件如何實(shí)現(xiàn)自定義偽3D輪播圖效果

這篇文章將為大家詳細(xì)講解有關(guān)微信小程序非swiper組件如何實(shí)現(xiàn)自定義偽3D輪播圖效果，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

江干網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站等網(wǎng)站項目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)公司2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運(yùn)維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)。

效果如下：

我用了很笨的方法實(shí)現(xiàn)的，大致就是：

1.當(dāng)前點(diǎn)擊的div（view）如果前后都有內(nèi)容，那么，當(dāng)前div（view）就設(shè)置到中間，前一個就設(shè)置到左邊，前一個的前面所有全部設(shè)置到最左邊，后面一個設(shè)置到右邊，后面所有設(shè)置到最右邊

2.當(dāng)前點(diǎn)擊的div（view）如果前面無內(nèi)容，即第一個，那么，當(dāng)前div（view）設(shè)置到中間，后面一個設(shè)置到右邊，后面所有設(shè)置到最右邊

3.當(dāng)前點(diǎn)擊的div（view）如果后面無內(nèi)容，即最后一個，那么，當(dāng)前div（view）設(shè)置到中間，前面一個設(shè)置到左邊，前面所有設(shè)置到最左邊

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是標(biāo)題，用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全球十大突破技術(shù)11",
   imgsrc:"../../public/img/swiper.png"
  }, {
   aurl:"#",
   swpClass:"swp-right",
   time: "2018年3月下22",
   bname: "2018全球十大突破技術(shù)22",
    imgsrc: "../../public/img/swiper2.png"
 }, {
  aurl:"#",
  swpClass:"swp-rightNo",
  time: "2018年3月下33",
  bname: "2018全球十大突破技術(shù)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];//當(dāng)前
  if (curView.swpClass ==='swp-center'){//如果當(dāng)前是在中間的，即可跳轉(zhuǎn)
   wx.navigateTo({
    url: curView.aurl,
   })
  }
  if(prev){//如果當(dāng)前的前面有
   if (next) {//當(dāng)前的后面有
    next.swpClass = "swp-right";
   }
   prev.swpClass ="swp-left";
   curView.swpClass = "swp-center";
   for (var i =0; i < idx; i++) { //當(dāng)前前一個的前面所有
    swp[i].swpClass = 'swp-leftNo'
   }
  }
  if(next){//如果當(dāng)前的后面有
   if(prev){//當(dāng)前的前面有
    prev.swpClass = "swp-left";
   }
   curView.swpClass = "swp-center";
   next.swpClass = "swp-right";
   for (var i = (idx + 2); i < max; i++) {//當(dāng)前后一個的后面所有
    swp[i].swpClass = 'swp-rightNo'
   }
  }else{
   prev.swpClass = "swp-left";
   curView.swpClass = "swp-center";
  }
  this.setData({
   swiperList: swp
  })
 },
})

如果要實(shí)現(xiàn)滑動切換，可用 bindtouchstart 和 bindtouchend 來實(shí)現(xiàn)。 思路大概是滑動了一定距離之后就添加class。

關(guān)于“微信小程序非swiper組件如何實(shí)現(xiàn)自定義偽3D輪播圖效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

當(dāng)前名稱：微信小程序非swiper組件如何實(shí)現(xiàn)自定義偽3D輪播圖效果
轉(zhuǎn)載來源：http://bm7419.com/article34/igiese.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站內(nèi)鏈、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)