标签：轮播 .. 微信 two introduce key imgSrc swiper 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。