世间规则~无图无真相，先上传图片！这是一个展示列表的滑动轮播组件。单击左右按钮可左右滑动。每次可以滑动指定量，可以指定显示多少行内容。本人前端菜鸟，大佬们轻喷分享下面的代码，因为我是用React+Typescript做项目的。看不懂也没关系！换成普通的html和js类似。使用组件代码importReact,{Component,ComponentType}from'react'import{Icon}from'antd'import'./index.scss'接口IProps{cityList:Array,row:number,step:number}interfaceIStates{cityContainerWidth:number,cityWrapWidth:number,cityWrapTranslateX:number}classSliderextendsComponent{constructor(props:IProps){super(props)this.state={cityContainerWidth:0,cityWrapWidth:0,cityWrapTranslateX:0}}componentDidMount():void{const{cityList,row}=this.propsconstcityWrapWidth:number=cityList.length>12？Math.ceil(cityList.length/row)*220:1320常量cityWrapDom:HTMLElement|null=document.getElementById('city__wrap')作为HTMLElementconstcityContainerDom:HTMLElement|null=document.getElementById('city__container')作为HTMLElementconstcityContainerWidth:number=cityContainerDom.offsetWidthcityWrapDom&&(cityWrapDom.style.width=`${cityWrapWidth}px`)this.setState({cityContainerWidth,cityWrapWidth})}handleArrowClick(direction:string):void{const{step}=this.props常量{cityContainerWidth,cityWrapWidth,cityWrapTranslateX}=this.stateconstcityWrapDom:HTMLElement|null=document.getElementById('city__wrap')asHTMLElement/*步长*/consttranslateStep:number=220*stepconsttranslateDistance:number=translateStep*(direction==='left'?1:-1)letnewTranslateX:number=cityWrapTranslateX/*相对移动距离*/constrelativeTranslateX:number=cityContainerWidth-cityWrapTranslateXconstisLeftEnd:boolean=relativeTranslateX<=cityContainerWidthconstisLeftOverflow:boolean=relativeTranslateX-translateDistance<=cityContainerWidthconstisRightEnd:boolean=relativeTranslateX+th//这个10代表右边距10个像素，加上10个隐藏constisRightOverflow:boolean=relativeTranslateX-translateDistance>=cityWrapWidth/*点击左箭头*/if(translateDistance>0){/*是否到达左端*/if(isLeftEnd)returnif(isLeftOverflow){/*如果超出范围，则滑动距离刚好到达左侧末端*/newTranslateX=0}else{/*如果没有超出范围，滑动距离直接加到步长上*/newTranslateX+=translateDistance}}elseif(translateDistance<0){/*是否到达右侧终点*/if(isRightEnd)returnif(isRightOverflow){/*超出范围，则滑动刚好到右端的距离*/newTranslateX+=relativeTranslateX+10-cityWrapWidth}else{/*不超出范围，滑动距离直接加到步长上*/newTranslateX+=translateDistance}}consttransformString:string=`translateX(${newTranslateX}px)`cityWrapDom&&(cityWrapDom.style.transform=transformString)this.setState({cityWrapTranslateX:newTranslateX})}render(){const{cityList}=复制代码this.propsreturn(我是一个轮播图
