Taro -- Swiper的圖片由小變大3d輪播效果

Swiper的圖片由小變大3d輪播效果

this.state = ({
      nowIdx:0,
      swiperH:'',
      imgList:[
        {img:'../../assets/12.jpg'},
        {img:'../../assets/23.jpg'},
        {img:'../../assets/34.jpg'}
      ],
})

 //獲取swiper高度
  getHeight = (e) => {
    var winWid = Taro.getSystemInfoSync().windowWidth - 2*50;//獲取當前屏幕的寬度
    var imgh = e.detail.height;//圖片高度
    var imgw = e.detail.width;//圖片寬度
    console.log(imgh,imgw);
    var sH = winWid * imgh / imgw + "px"
    this.setState({
        swiperH: sH//設置高度
    },()=>{
      console.log(this.state.swiperH)
    })
  }
  //swiper滑動事件
  swiperChange = (e) => {
    this.setState({
        nowIdx: e.detail.current
    })
  }

<Swiper
        previousMargin='50px' 
        nextMargin='50px'
        onChange={this.swiperChange}
        className='test-h'
        circular
        interval='2000'
        autoplay>
        {this.state.imgList.map((list, index) => {
           return <SwiperItem>
              <View className='demo-text-1'>
                <Image onLoad={this.getHeight} style={`height:${this.state.swiperH}`} className={`swiper-img ${this.state.nowIdx === index ? "swiper-active" : ""}`} src={list.img}></Image>
              </View>
            </SwiperItem>
         })}
</Swiper>

swiper {
    padding-top: 30px;
 }
.swiper-img {
    width: 100%;
    display: block;
    transform: scale(0.8);
    transition: all 0.3s ease;
    border-radius: 6px;
}
.swiper-img.swiper-active {
    transform: scale(1); //放大縮放的效果
 }

（1） previousMargin 和 nextMargin 表示前邊距和后邊距

（2） onChange={this.swiperChange} 就是Swiper的切換事件

（4） getHeight 是獲取圖片的寬高，然后再去設置高度這樣才能讓圖片等比縮放