微信小程序3D轮播图实现

好久没有写博客了,前段时间换了家公司,做了两个多星期,完成了一款app的开发, 公司没有app的需求了,我们几个移动端Android和IOS都转岗开发微信小程序,由于刚接触小程序不到两周,技术还是基于复制粘贴,h5以前也就看看,所以针对css样式和div之类的没有什么感觉,基本一切从0开始,好了,扯淡完毕-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

刚看了2天的小程序,咱们几个就开始上手开撸,不得不说微信的小程序封装的还是挺全面的,其实也就是间接的说很多东西都封装的比较死板,UI希望首页的banner实现各种形式的3D轮播图的效果,请看效果图

其实在app里面这种效果还是比较常见的,开源库也比较多,但是作为资深伸手党的我,居然没有搜索到实现3D轮播图的实例,好吧,只能自己开撸了,我的方式是基于原生的Swiper来实现的,配合previous-margin next-margin来实现左右两边的边框缩进效果,好了这只是第一步,第二部就是实现缩放的动画了效果了,我自己总结了两种方法,

第一种:通过css中控制选中和没有选中的swiper做监听,修改对应的css的样式,这时候需要对swpier做onChange监听,来改变选中的index角标,这个变量要写在data层里面,让直行img的时候能动态获取到xIndex的值,执行不同的css样式,这种方式通过设置img的高度来实现,选中设置100%的高度,没有选中的设置高度为90%,代码如下

 <view class='bannerWrap'>
    <image class='imgBannerBack' src='../../static/img/back_banner.png' mode='scaleToFill'></image>
    <swiper class='bannerSwiper' previous-margin="54rpx" next-margin='54rpx' indicator-dots="true" indicator-color='#B5B5B5' indicator-active-color='#fff' interval='3000' duration='500' bindchange='onChange' circular='true'>
      <block wx:for="{{banner}}">
        <swiper-item>
          <image class="{{index==xindex?'imageBanner':'imageBanner_small'}}" src="{{item}}" id='{{item.url}}' bindtap='imageClick'></image>
        </swiper-item>
      </block>
    </swiper>
  </view>



.imageBanner {
  width: 100%;
  height: 100%;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
}


.imageBanner_small {
  width: 94%;
  height: 90%;
  margin-left: 20rpx;
  margin-right: 20rpx;
  position: absolute;
  bottom: 0;
  border-top-left-radius: 15rpx;
  border-top-right-radius: 15rpx; 

}










第二种方法:

原理基本相同,只不过改变图片大小的时候利用的css的trasnform和trasnsition来实现界面动画的放大和缩小的过程的一个切换,具体代码就是css的样式做了一个切换

具体代码如下

.imageBanner {
  width: 100%;
  height: 100%;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
}

.imageBanner_small {
  height: 100%;
  transform: scale(0.9);
  transition: all 0.2s ease-in 0s;
  border-top-left-radius: 15rpx;
  border-top-right-radius: 15rpx;
  bottom: -13rpx;
  margin-left: -10rpx;
  position: absolute;
 
}

下面看下具体实现的效果图吧

今天比较忙,等稍微闲点的时候将对应的demo会上传供各位大佬参考,刚刚做小程序,实现的效果可能比较low,但是能解决目前遇到的问题,如果哪位大佬有更加好的实现方式,希望不吝赐教!

终于在一位兄弟的督促下把demo上传了,贴上地址

https://github.com/WinWang/WeChatBanner/tree/master

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页