taro实战-利用Swiper实现3D轮播

先看下taro对swiper的api和微信小程序swiper的 api
https://taro-ui.jd.com/#/docs/swiper
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

图片由小到大3D轮播效果

效果图：

图片.png

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
    })
  }

render内容 taro中onLoad只有Image有

        {this.state.imgList.map((list, index) => {
           return 
              
                
              
            
         })}

css样式：

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);  //放大缩放的效果
 }

块内容由小到大3D轮播效果
效果图：

图片.png

  state = {
    isOpened: false,
    cardInfo: {},
    card_id: 0,
    switchCard: true,
    cardList: [],
    nowIdx: 0,
  };


 getCardList(e) {
    api.request({
      methods: 'POST',
      url: '/card/myList',
      data: {
        access_token: user.getToken(),
      },
      success: (response) => {
        // if (response.data.result > 1) {
        //   this.setState({ isOpened: true });
        // }
        const cardList = response.data.result.filter(item => item.state === 2);
        this.setState({ cardList });

        if (!cardList.length) {
          return;
        }

        api.request({
          methods: "POST",
          url: "/card/qrCode",
          data: {
            access_token: user.getToken(),
            card_id: cardList[0].id
          },
          success: res => {
            this.setState({
              cardList: cardList.map((item, index) => {
                if (index === 0) {
                  item.qrImg = res.data.result;
                }

                return item;
              })
            });
          },
        });
      },
    });
  }



  // swiper滑动事件
  swiperChange = (e) => {
    const nowIdx = e.detail.current;
    this.setState({ nowIdx });
    const { cardList } = this.state;
    const findCard = cardList.find((_, index) => nowIdx === index);
    const currentCardId = findCard && findCard.id;
    api.request({
      methods: "POST",
      url: "/card/qrCode",
      data: {
        access_token: user.getToken(),
        card_id: currentCardId
      },
      success: res => {
        const qrImg = res.data.result;
        this.setState({
          cardList: cardList.map((item, index) => {
            if (index === nowIdx) {
              item.qrImg = qrImg;
            }
            return item;
          })
        });
      },
    });
  }


 
          {
            cardList.map((info, index) => {
              return 
                
                  
                  
                    
                      {info.name}
                      {info.position}
                    

                    {info.company.name}

                    {info.coc.name && 
                      {
                        info.coc.name &&
                        {info.coc.name}
                      }
                    }
                    扫描下方名片码查看名片
                    
                      
                    
                  
                
              ;
            })
          }
        

css样式

.swiper-style {
  height: 100%;
  margin-top: 20px;
}

.userInfo_warp {
  width: 100%;
  display: block;
  transform: scale(0.8);
  transition: all 0.3s ease;
}

.userInfo_warp.swiper-active {
  transform: scale(1); //放大缩放的效果
}

（1） previousMargin 和 nextMargin 表示前边距和后边距，微信小程序原生api中详细介绍；

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

（4） getHeight 是获取图片的宽高，然后再去设置高度这样才能让图片等比缩放