微信小程序非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轮播图效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。