SwipePlayer 轮播组件【react&Preact】

工作中需要做一个轮播选项卡，从网上搜一搜，然后自己做了一些调整，做一下笔记。如果引用需要结合自己的实际情况做微调！

import { h, Component } from 'preact';
import { ImageAttachmentButtons } from '../Messages/ImageAttachmentButtons';
import { createClassName, createspClassName, getAttachmentUrl, MemoizedComponent } from '../helpers';

import styles from './styles.scss';
import imgLURL from './images/left.png';
import imgRURL from './images/right.png';


export class SwipePlayer extends Component {

	state = {
		index: 0,
	}

	_nextImg =  (attachments) => {
		var { index } = this.state;
		if (index === attachments.length - 1) {
		  return
		} else {
		  index++
		}
		this.setState({
		  index: index
		})
	  }

	// 点击播放上一张
	_prevImg = (attachments) => {
		var { index } = this.state;
		if (index === 0) {
			return
		} else {
		index--
		}
		this.setState({
		index: index
		})
	}


	play = () => {
		this.timerId = setInterval(() => {
		  this._nextImg()
		}, 3000)
	  }


	render = ({
		className,
		style = {},
		attachments,
		children,
		attachmentResolver,
		text,
		system,
		quoted,
		me,
		blocks,
		mid,
		rid,
		token
	 }) => (
		<div className={createClassName(styles, 'wrap', {}, [className])}>
			<ul className={createClassName(styles, 'list', {}, [className])}>
			{
					attachments.map((attachment, i) => (
					<li className={createspClassName(styles, 'item', {}, [className], `${i === this.state.index ? 'active' : ''}`)}  key={i}>

						{<ImageAttachmentButtons
						url={attachmentResolver(attachment.image_url)}
						quoted={quoted}
						actions={attachment.actions}
						title={attachment.title}
						rid={rid}
						token={token}
					/>}
					</li>
					))
			}
			</ul>
			{/* <button className={createspClassName(styles, 'btn', {}, [className], 'left')} onClick={() => this._prevImg(attachments)}> */}
				<img className={createspClassName(styles, 'btn', {}, [className], 'left')} onClick={() => this._prevImg(attachments)} src={imgLURL}  />
			{/* </button> */}
			{/* <button className={createspClassName(styles, 'btn', {}, [className], 'right')} onClick={() => this._nextImg(attachments)}> */}
				<img className={createspClassName(styles, 'btn', {}, [className], 'right')} onClick={() => this._nextImg(attachments)} src={imgRURL}  />
			{/* </button> */}
		</div>

	)
}

完整代码如下：

https://pan.baidu.com/s/1M_g2XVjvqMDcfK3EhILWpA

提取码获取方法：

关注公众号发送：【SwipePlayer】