无缝轮播图 React+Ts类 React+Ts+hook vue3.0 +hook

React类

index.tsx

import React, { Component, createRef } from 'react';
import './index.less';
export default class index extends Component {
    x: number = 0;
    dix: number = 0;
    index: number = 1;
    list = [3, 0, 1, 2, 3, 0];
    box = createRef<HTMLDivElement>();
    Getbox = () => this.box.current as HTMLDivElement;
    start = (ev: React.TouchEvent) => {
        this.dix = ev.changedTouches[0].pageX;
        if (this.index === this.list.length - 1) this.index = 1;
        if (this.index === 0) this.index = this.list.length - 2;
        document.ontouchmove = this.move.bind(this);
        document.ontouchend = this.end.bind(this);
        this.Getbox().style.transition = 'none';
    };
    move = (ev: TouchEvent) => {
        this.x = ev.targetTouches[0].pageX - this.dix;
        this.Getbox().style.left = this.index * -100 + 'vw';
    };
    end = (ev: TouchEvent) => {
        if (this.x < -50) this.index++;
        if (this.x > 50) this.index--;
        this.Getbox().style.left = this.index * -100 + 'vw'; this.Getbox().style.transition = '.3s all';
    };
    render() {
        return (
            <div className='Swiper' onTouchStart={this.start.bind(this)}>
                <div className="swipers" ref={this.box}>
                    {this.list.map((item, index) => (<div key={index} className="swiper-item">{item}</div>))}
                </div>
            </div>
        )
    }
}

index.less

.Swiper {
  width: 750px;
  height: 100vh;
  overflow: hidden;
  position: relative;
  .swipers {
    width: calc(100vw * 6);
    display: flex;
    position: absolute;
    left: -100vw;
  }
  .swiper-item {
    transition: 0.3s all;
    width: 100vw;
    line-height: 300px;
    color: #fff;
    font-size: 50px;
    text-align: center;
  }
  .swiper-item:nth-child(1) {
    background-color: pink;
  }
  .swiper-item:nth-child(2) {
    background-color: red;
  }
  .swiper-item:nth-child(3) {
    background-color: yellow;
  }
  .swiper-item:nth-child(4) {
    background-color: greenyellow;
  }
  .swiper-item:nth-child(5) {
    background-color: pink;
  }
  .swiper-item:nth-child(6) {
    background-color: red;
  }
}

React+Ts+hook

index.tsx

import React, { useRef } from 'react'
import './index.less'
export default function Wflbt() {
    const arr = [3, 0, 1, 2, 3, 0]
    let x: number = 0
    let dix: number = 0
    let num: number = 1
    const box = useRef<HTMLDivElement | null>(null)
    const Getbox = () => box.current as HTMLDivElement
    const Fnstart = (e: React.TouchEvent) => {
        dix = e.changedTouches[0].pageX
        if (num === arr.length - 1) num = 1
        if (num === 0) num = arr.length - 2
        Getbox().style.left = num * -100 + 'vw'
        document.ontouchmove = Fnmove
        Getbox().style.transition = 'none'
    }
    const Fnmove = (e: TouchEvent) => {
        x = e.changedTouches[0].pageX - dix
        document.ontouchend = Fnend
    }
    const Fnend = () => {
        if (x < -50) num++
        if (x > 50) num--
        Getbox().style.left = num * -100 + 'vw'
        Getbox().style.transition = '.3s all'
    }
    return (
        <div className="Swiper" onTouchStart={Fnstart}>
            <div className="Swipers" ref={box}>
                {
                    arr.map((item, index) => (
                        <div className="item" key={index}>{item}</div>
                    ))
                }
            </div>
        </div>
    )
}

index.less

.Swiper {
  overflow: hidden;
  position: relative;
  width: 100vw;
  height: 100vh;
  .Swipers {
    display: flex;
    width: calc(6 * 100vw);
    position: absolute;
    left: -100vw;
    .item {
      line-height: 20vh;
      width: 100vw;
      text-align: center;
      background-color: red;
    }
    .item:nth-child(1){
        background-color: red;
    }
    .item:nth-child(2){
        background-color: pink;
    }
    .item:nth-child(3){
        background-color: skyblue;
    }
    .item:nth-child(4){
        background-color: yellow;
    }
    .item:nth-child(5){
        background-color: red;
    }
    .item:nth-child(6){
        background-color: pink;
    }
  }
}

Vue3.0+hook

<template>
  <div class="Swiper" v-on:touchstart="Fnstart">
    <div class="Swipers" ref="box">
      <div class="item" v-for="(item, index) in arr" :key="index">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "@vue/reactivity";
const arr = [3, 0, 1, 2, 3, 0];
let x: number = 0;
let dix: number = 0;
let num: number = 1;
const box = ref<HTMLDivElement | null>(null);
const Getbox = () => box.value as HTMLDivElement;
const Fnstart = (e: TouchEvent) => {
  dix = e.changedTouches[0].pageX;
  if (num === arr.length - 1) num = 1;
  if (num === 0) num = arr.length - 2;
  Getbox().style.left = num * -100 + "vw";
  document.ontouchmove = Fnmove;
  Getbox().style.transition = "none";
};
const Fnmove = (e: TouchEvent) => {
  x = e.changedTouches[0].pageX - dix;
  document.ontouchend = Fnend;
};
const Fnend = () => {
  if (x < -50) num++;
  if (x > 50) num--;
  Getbox().style.left = num * -100 + "vw";
  Getbox().style.transition = ".3s all";
};
</script>

<style lang="less" scoped>
.Swiper {
  overflow: hidden;
  position: relative;
  width: 100vw;
  height: 100vh;
  .Swipers {
    display: flex;
    width: calc(6 * 100vw);
    position: absolute;
    left: -100vw;
    .item {
      line-height: 20vh;
      width: 100vw;
      text-align: center;
      background-color: red;
    }
    .item:nth-child(1) {
      background-color: red;
    }
    .item:nth-child(2) {
      background-color: pink;
    }
    .item:nth-child(3) {
      background-color: skyblue;
    }
    .item:nth-child(4) {
      background-color: yellow;
    }
    .item:nth-child(5) {
      background-color: red;
    }
    .item:nth-child(6) {
      background-color: pink;
    }
  }
}
</style>