重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

这篇文章将为大家详细讲解有关微信小程序非swiper组件如何实现自定义伪3D轮播图效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

江干网站制作公司哪家好,找成都创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站等网站项目制作,到程序开发,运营维护。成都创新互联公司2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联

效果如下:

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

我用了很笨的方法实现的,大致就是:

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

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

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

1.html


 
  
   
   
    {{item.time}}
    {{item.bname}}
   
  
 

注: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
  })
 },
})

如果要实现滑动切换,可用 bindtouchstartbindtouchend 来实现。 思路大概是滑动了一定距离之后就添加class。

关于“微信小程序非swiper组件如何实现自定义伪3D轮播图效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


分享标题:微信小程序非swiper组件如何实现自定义伪3D轮播图效果
文章URL:http://cqcxhl.cn/article/igiese.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP