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有

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

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


 <Swiper
          previousMargin='50px'
          nextMargin='50px'
          onChange={this.swiperChange}
          className="swiper-style"
          circular
          interval='2000'
          autoplay={false}
        >
          {
            cardList.map((info, index) => {
              return <SwiperItem>
                <View className={`userInfo_warp ${nowIdx === index ? "swiper-active" : ""}`}>
                  <Image src={info.avatar} className="userAvatar"></Image>
                  <View className="userInfoContent">
                    <View className="namePost">
                      <Text className="union">{info.name}</Text>
                      <Text className="pos">{info.position}</Text>
                    </View>

                    <Text className="company">{info.company.name}</Text>

                    {info.coc.name && <View className="allInfo">
                      {
                        info.coc.name &&
                        <Text className="subordinate">{info.coc.name}</Text>
                      }
                    </View>}
                    <Text className="tips">扫描下方名片码查看名片</Text>
                    <View className="qrCode">
                      <Image src={info.qrImg} className="img_qrcode" />
                    </View>
                  </View>
                </View>
              </SwiperItem>;
            })
          }
        </Swiper>

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 是获取图片的宽高，然后再去设置高度这样才能让图片等比缩放