工作中需要做一个轮播选项卡,从网上搜一搜,然后自己做了一些调整,做一下笔记。如果引用需要结合自己的实际情况做微调!
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】

评论前必须登录!
注册