编程语言
首页 > 编程语言> > 微信小程序3D轮播图

微信小程序3D轮播图

作者:互联网

一、最终效果

在这里插入图片描述

二、利用原生swiper制作3D效果

1、需要注意的几个API

previous-margin:说白了就是前一张图片能露多少。
next-margin:说白了就是后一张图片能露多少。
circular:这个属性也是需要加的,加不加什么区别,一对比就知道。

在这里插入图片描述

2、上代码

wxml

 <view class="swiper_wrapper">
    <swiper 
      autoplay 
      indicator-dots 
      indicator-color="#8FA2EF" 
      indicator-active-color="#2F54EB" 
      class="swiper_two"
      previous-margin="150rpx"
      next-margin="150rpx"
      circular
      bindchange="handleChangeTwo">
      <block wx:for="{{swiperTwoInfo}}" wx:key="key">
          <swiper-item class="item">
            <image mode="aspectFit" class="swiper_two_img {{currentIndex4 == index ? 'active' : ''}}" src="{{item.imgSrc}}" />
          </swiper-item>
        </block>
    </swiper>
  </view>

wxss

.swiper_wrapper{
  margin-bottom: 34rpx;
}
.swiper_two{
  width: 100%;
  height: 500rpx;
}
.swiper_two_img{
  width: 100%;
  display: block;
  //重点是以下三句
  transform: scale(0.8);
  transition: all 0.3s ease;
  border-radius: 6px;
}
.active{
  transform: scale(1);
 }

js
现在data中定义当前图片的索引:

data:{
	// 轮播图二当前突出图片索引
    currentIndex4: 0,
    swiperTwoInfo:[
      {
        key:'21',
        imgSrc:'../../../static/imgs/department_introduce/achievements_summary/swiper_two.png'
      },
      {
        key:'22',
        imgSrc:'../../../static/imgs/department_introduce/achievements_summary/swiper_two.png'
      },
      {
        key:'233',
        imgSrc:'../../../static/imgs/department_introduce/achievements_summary/swiper_two.png'
      },
    ],
}

其次是swiper的change事件处理函数;

/* 实现控制中间凸显图片的样式 */
handleChangeTwo: function(e) {
    this.setData({
      currentIndex4: e.detail.current
    })
  },

ARTICLE ENDING

标签:轮播,..,微信,two,introduce,key,imgSrc,swiper,3D
来源: https://blog.csdn.net/weixin_43242112/article/details/110223522