不再犹豫
工作中需要做一个轮播选项卡，从网上搜一搜，然后自己做了一些调整，做一下笔记。如果引用需要结合自己的实际情况做微调！
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 - 动画运行结束的回调函数
