本文實(shí)例講述了微信小程序非swiper組件實(shí)現(xiàn)的自定義偽3D輪播圖效果。分享給大家供大家參考，具體如下：
效果如下：
我用了很笨的方法實(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是因?yàn)闀l繁切換。
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。
還有一篇更簡單的：用swiper來實(shí)現(xiàn)的3d輪播
希望本文所述對大家微信小程序開發(fā)有所幫助。
新聞熱點(diǎn)
疑難解答
