Taro,React,Typescript实现轮播图

Carousel总结

需求：轮播图：自动轮播，漏出下一项的一部分，向左移动，无缝连接切换

项目技术栈为react.js，Taro，typescript

难点：因为技术栈的原因，使用Taro的Swiper组件来写轮播，普通的轮播用这个组件可以完成，但是因为需求需要漏出下一项的一部分，Taro的Swiper组件没有这个属性，小程序的next-margin(在Taro里使用为nextMargin)可以满足这个需求，但是H5端不支持，所以解决方法要么是使用Swiper组件，兼容H5端，要么使用其他容器组件实现。

补充：在小程序或者Taro里，swiper组件的swiper-item组件的宽高默认继承swiper，宽高100%，所以无论怎么改宽度都没用，网上说高可以使用**！impotant**来改（ps：如果能改宽度，那么漏出下一项的一部分这个需求就很容易了，可惜。。。不能）

在开始尝试其他方法之前，我重新看了一遍Taro所有容器组件的文档，如果能使用Taro提供的那是最好的了，看完发现除了pass的Swiper组件，似乎ScrollView能实现。。。

• 尝试方法一：使用ScrollView实现

  经过尝试发现，ScrollView可以实现手动滑动图片的效果，但是要实现自动切换的话，需要使用onScroll这个事件来监听ScrollView容器距离左边的距离，然后使用定时器，几秒之后设定距离左边的距离或者使用marginLeft来控制距离左边的距离，但是！！！我忘了这个是可以手动滑动的啊！！！，要是在它自动轮播的时候，人为去滑动，那就会出问题了，所以Pass！

• 尝试方法二：使用最简单的css来实现
  使用animation实现

  <!-- 注：代码使用微信小程序编写，测试图片有四张-->
  <!-- wxml文件 -->
  <view class='carousel'>
    <view class='carousel-box'>
      <block wx:for="{{imgUrls}}">
        <view class='carousel-item'>
          <image class='carousel-img' src='{{item}}'></image>
        </view>
      </block>
    </view>
  </view>
  <!-- wxss文件 -->
  .carousel{
    width:750rpx;
    height:384rpx;
    overflow: hidden;
    margin-left:32rpx;
  }
  .carousel-box{
    width:2250rpx; //根据图片数组的长度算出来的
    animation: imgMove 6s ease-out infinite
  }
  .carousel-item{
    float:left;
    width:624rpx;
    margin-right:12px;
  }
  .carousel-img{
    width:624rpx;
    height:384rpx;
    border-radius: 3px;
  }
  
  @keyframes imgMove{
    0%, 25% {
      margin-left:0;
    }
    35%,60%{
      margin-left:-324px
    }
    70%, 100%{
      margin-left:-648px;
    }
  }
  

​ 缺点：在这个业务场景里，轮播图片数量不固定，@keyfarames需要确定图片数量来确定百分之几滑动多少，所以这种方式pass，其实图片数量少的话也可以实现，但是，麻烦！

• 方式三：使用原生js实现：这种方式就不多说了，网上有很多例子，这个项目技术栈是react，要是使用原生js，当然可以满足项目需求，但是js操作Dom违反了react的本意，每一次Dom改变都会重新渲染一遍页面，性能上会差很多。Pass！

• 方式四：使用最基本的View组件：

  • 1，先写好样式

    使用View来包裹所有图片，让所有图片放在一行，并且显示第一张，漏出下一项的一部分，这个地方可通过控制图片的显隐或者控制包裹图片的View的宽度或者控制透明度等等来实现。

  • 2，实现自动轮播

    首先要获取图片数组的length，然后计算出包裹图片的外层View的宽度，使用marginLeft来实现向左移动，向左移值为负值（如果要实现向右移，值为正值或者使用marginRight），使用index来标记移动到哪张图片，并且计算marginLeft的值

    这里注意赋初值的时候，有的不要用0为初值，比如包裹图片的那个View的宽度（普及一年就知识：0乘任何数得0）

  • 3，实现循环轮播

    当图片轮播到最后一张图片的时候，需要把index的值赋为第一张的index，这样才能实现轮播完一轮之后接着下一轮

    当到这的时候其实已经有效果了，但是会发现，因为轮播的时候会漏出下一项的一部分，当到最后一张的时候，它的下一项其实是空白的，所以就需要做无缝连接

  • 3，实现无缝连接

    思路：拷贝图片数组的第一项，做判断，最后一张后面隐藏第一张的复制，这样当轮播到数组最后一张图片的时候，露出我们拷贝的那张图片就好了

    //此代码没有做无缝连接，思路已奉上
    //index.js
    import Taro,{ useState, useEffect } from '@tarojs/taro'
    import { View, Image } from '@tarojs/components'
    import { cropImage } from '../../utils/tools'
    import './index.scss'
    
    type Props = {
      imgList: string[]
    }
    
    export default function WebCarousel({
                                          imgList: []
                                        } : Props) {
      const { imgList } = this.props;
      const len = imgList.length;
      const ImgBoxWidth = Taro.pxTransform(750*len);
      const [index, setIndex] = useState<number>(1);
      const [translateLeft, setTranslateLeft] = useState<number>(1);
      const lastImg = imgList[len];
      imgList.push(lastImg)
      useEffect(() => {
        if(index === len ){
          setIndex(0);
          setTranslateLeft(1)
        }
        setInterval(() => {
          setIndex(index+1);
          setTranslateLeft(648 * index);
        },4000);
      }, [index]);
    
      return <View className='WCarousel'>
        <View className='WCarousel-list' style={{width:ImgBoxWidth, marginLeft:Taro.pxTransform(-translateLeft)}}>
          {
            imgList.map(item => (
              <View className='WCarousel-item' >
                <Image className='WCarousel-img' src={cropImage(item)} />
              </View>
            ))
          }
        </View>
      </View>
    }
    //index.scss
    .WCarousel{
      width:750px;
      height:384px;
      overflow: hidden;
      margin-left:32px;
      &-list{
        height:384px;
        transition:all 0.3s
      }
      &-item{
        float:left;
        width:624px;
        margin-right:24px;
      }
      &-img{
        width:624px;
        height:384px;
        border-radius: 6px;
      }
    }
    

总结：在网上看了大量实现轮播图的例子，基本思路都是让一个div包裹所有图片，显示第一张图片，其他的不可见（可以使用显隐控制，设置透明度，控制包裹图片的view的宽度等来实现），除了使用marginLeft来控制图片切换，也可以使用translateX来实现，然后使用css的transition来实现平滑过度，使用“狸猫换太子”的方式实现无缝切换，要是想实现点击切换上一张下一张图片的话，还需要拷贝图片首尾的图片来实现（本次项目只需拷贝最后一张即可）。

原文地址：https://blog.csdn.net/L_AMiao/article/details/98857427