微信小程序非swiper组件实现的自定义伪3D轮播图效果示例

2019-11-19 12:21:41

字体：大中小

来源：转载

供稿：网友

本文实例讲述了微信小程序非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轮播

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

上一篇：vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

下一篇：vue-cli2.0转3.0之项目搭建的详细步骤