使用React制作一个滑动轮播展示组件

最新推荐文章于 2024-09-01 08:06:57 发布

置顶

BB小天使

最新推荐文章于 2024-09-01 08:06:57 发布

阅读量1.6k

点赞数 1

文章标签：轮播图滑动 React Typescript 展示组件

本文链接：https://blog.csdn.net/weixin_42963591/article/details/103476875

版权

本文介绍了一位前端新手使用React和Typescript创建一个滑动轮播展示组件的过程，包括组件代码、样式文件（使用Sass编写）和代码分析。组件允许用户点击左右按钮进行内容滑动，并可自定义每次滑动的数量和展示行数。作者详细解释了滑动逻辑和边界条件处理，鼓励读者尝试理解并动手实践。

摘要由CSDN通过智能技术生成

江湖规矩~无图无真相，先上图！

这是一个展览列表的滑动轮播组件，点击左右按钮就可以进行左右滑动，每次可以滑动指定的数量，以及可以指定展示多少行的内容。

本人前端小菜鸟，大佬们轻喷呜呜呜

下面来分享一下代码

因为本人采用的是React + Typescript来做项目的，大家如果有看不懂也没关系的！换成普通的html跟js也差不多的。

使用

<Slider cityList={cityList} row={2} step={2} />

组件代码

import React, {
    Component, ComponentType } from 'react'
import {
    Icon } from 'antd'

import './index.scss'

interface IProps {
   
  cityList: Array<number>,
  row: number,
  step: number
}

interface IStates {
   
  cityContainerWidth: number,
  cityWrapWidth: number,
  cityWrapTranslateX: number
}

class Slider extends Component<IProps, IStates> {
   
  constructor(props: IProps) {
   
    super(props)
    this.state = {
   
      cityContainerWidth: 0,
      cityWrapWidth: 0,
      cityWrapTranslateX: 0
    }
  }

  componentDidMount(): void {
   
    const {
    cityList, row } = this.props
    const cityWrapWidth: number = cityList.length > 12 ? Math.ceil(cityList.length / row) * 220 : 1320
    const cityWrapDom: HTMLElement | null = document.getElementById('city__wrap') as HTMLElement
    const cityContainerDom: HTMLElement | null = document.getElementById('city__container') as HTMLElement
    const cityContainerWidth: number = cityContainerDom.offsetWidth
    cityWrapDom && (cityWrapDom.style.width = `