小程序怎么实现滑动图片中间放大

Question

请问各位大佬小程序怎么实现这种效果啊，十分感谢

Answer 1

wxml部分

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{true}}" interval="5000" duration="500" circular="{{true}}" previous-margin="-30rpx" next-margin="-30rpx" display-multiple-items="5" skip-hidden-item-layout="true" bindchange="swiperChange">
  <block wx:for="{{swiperList}}" wx:key="{{index}}">
    <swiper-item>
      <view class="{{ index == activeIndex ? 'active item-block' : 'item-block'}}">
        <image src="{{item}}" mode="aspectFill"></image>
      </view>
    </swiper-item>
  </block>
</swiper>

wxss部分

swiper{
  height: 350rpx;
}
swiper-item .item-block{
  padding: 0 10rpx;
  height: 350rpx;
  padding-top: 45rpx;
  overflow: hidden;
}
swiper-item .item-block image{
  width: 100%;
  height: 260rpx;
}
swiper-item .item-block.active{
  padding-top: 0;
}
swiper-item .item-block.active image{
  height: 350rpx;
}

js部分

Page({
  data: {
    swiperList: ['/images/1.jpg','/images/2.jpg','/images/1.jpg','/images/2.jpg','/images/1.jpg','/images/2.jpg','/images/1.jpg','/images/2.jpg'],
    activeIndex: 2
  },
  swiperChange(e) {
    console.log(e.detail.current)
    if(e.detail.current >= this.data.swiperList.length - 2) {
      e.detail.current = e.detail.current - this.data.swiperList.length
    }
    this.setData({
      activeIndex: e.detail.current + 2
    })
  }
})