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

来源：https://blog.csdn.net/L_AMiao/article/details/98857427

标签

轮播

react

typescript

swiper