微信小程序非捣蛋鬼组件实现的自定义伪三维(三维的缩写)轮播图效果示例

本文实例讲述了微信小程序非捣蛋鬼组件实现的自定义伪三维(三维的缩写)轮播图效果。分享给大家供大家参考，具体如下：

效果如下：

我用了很笨的方法实现的，大致就是：

1.当前点击的div(视图)如果前后都有内容，那么，当前div(视图)就设置到中间，前一个就设置到左边，前一个的前面所有全部设置到最左边，后面一个设置到右边，后面所有设置到最右边

2.当前点击的div(视图)如果前面无内容，即第一个，那么，当前div(视图)设置到中间，后面一个设置到右边，后面所有设置到最右边

3.当前点击的div(视图)如果后面无内容，即最后一个，那么，当前div(视图)设置到中间，前面一个设置到左边，前面所有设置到最左边

1.html

view class=' idx-content ' view class=' idx-swiper ' view class=' idx-cswp { { item }。SWP class } } ' wx : for=' { { SwiperList } } ' wx : key=' ' bind tap=' SWpbtn ' data-index=' { { index } } ' image src=' { { item。imgsrc } } ' mode=' width fix '/image view class=' SWP-title ' hidden=' { { item。swpcsrc } ' .==' SWP-中心' } } '视图类=' SWP-时间' { item。time } }/view view class=' SWP-bname ' { item。bname } }/view/view/view/view注：SWP-标题是标题，用隐藏的替代wx:if是因为会频繁切换。

2.wxss。idx-content { overflow:隐藏；padding: 0 40rpx }。idx-内容idx-swiper {相对位置：边距： 40 rpx 0；填充-底部： 100%;}.idx-内容idx-swiper .idx-cswp { width : 70%；高度： 100%;绝对位置：top : 0；边界半径： 6px}.idx-内容idx-swiper .idx-cswp图像{宽度： 100%；最大高度： 600 rpx}.idx-内容idx-swiper .idx-cswp .SWP标题SWP-英国时间{ text-align : centerfont-size : 28 rpx}.idx-内容idx-swiper .idx-cswp .SWP标题SWP-bname { text-align : center；font-size : 24 rpx}.SWP左{/*左边样式*/transit : all。3s轻松；变压器：刻度(0.8);左侧：-55%;}.swp-center {/*中间样式*/左： 15%；transit : all . 3s easetrant :比例尺(1);}.SWP右{/*右边样式*/transit : all。3s轻松；变压器：刻度(0.8);左侧： 85%;}.swp-rightNo {/*最右边样式*/transit : all。3s轻松；左： 150%;}.swp-leftNo {/*最左边样式*/transit : all。3s轻松；左侧：-150%;}3.js

页面({ data:{ swiperList: [{//除了1,2之外，其它的swpClass都是SWP-右侧no aull : './start/start '，SWPC :班' SWP-中心'，时间：'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 :函数(e){ var SWP=this。数据。swiper列表；var max=SWP . length var idx=e . CurrentTarget。数据集。指数；var prev=SWP[idx-1]；//前一个var next=SWP[idx 1]；//后一个var Curview=SWP[idx]；//当前if(curve view。SWP==' SWP-中'){//如果当前是在中间的，即可跳转wx。navigateto({ URL : curview。aurl，}) } if(prev){//如果当前的前面有if (next) {//当前的后面有下一个。SWP class=' SWP-右'；} prev。SWP class=' SWP-左'；曲线视图。SWP=' SWP-中心'；for(var I=0；i idxi ) { //当前前一个的前面所有swp[i].SWP=' SWP-左无' } }如果(下一个){//如果当前的后面有if(prev){//当前的前面有prev。SWP class=' SWP-左'；}曲线视图。SWP=' SWP-中心'；下一个。SWP class=' SWP-右'；for(var I=(idx 2)；我最大；i ) {//当前后一个的后面所有swp[i].SWP=' SWP-对不对' } }其他{ prev。SWP=' SWP-左'；曲线视图。SWP=' SWP-中心'；}这个。setdata({ SwiperList : SWP })}，})如果要实现滑动切换，可用bindtouchstart和bindtouchend来实现。思路大概是滑动了一定距离之后就添加班级。

还有一篇更简单的：用捣蛋鬼来实现的三维(三维的缩写)轮播

希望本文所述对大家微信小程序开发有所帮助。