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】

【番外】

其实刚开始打算使用Swiper插件，但是自己已经写出来了功能实现以及项目比较急，所以只能后期去替换吧，抽空会整理一下引入Swiper插件的使用方法。先简单介绍下Swiper：

swipe.js是一个比较有名的触摸滑动插件，它能够处理内容滑动，支持自定义选项，你可以让它自动滚动，控制滚动间隔，返回回调函数等。经常可见使用在移动前端开发中。

使用方法

先安装插件   npm i swiper –save

配置属性预览

startSlide Integer (default:0) - 开始滚动的位置
speed Integer (default:300) - 动画滚动的间隔（秒数）
auto Integer - 开始自动幻灯片（以毫秒为单位幻灯片之间的时间）
continuous Boolean (default:true) - 创建一个无限的循环（当滑动到所有动画结束时是否循环滑动）
disableScroll Boolean (default:false) - 当滚动滚动条时是否停止幻灯片滚动
stopPropagation Boolean (default:false) - 是否停止事件冒泡
callback Function - 幻灯片运行中的回调函数
transitionEnd Function - 动画运行结束的回调函数