原有组件不足
原有的Carousel组件相关属性太少,翻页需要点击下面的dots来实现,由于dots很不明显,点击很困难(修改样式后还是很不容易点中),根据项目需求,增加了前后按钮,鼠标移动上去显示翻页按钮,实现了前后手动翻页功能。
实现效果
见下图
实现思路
增加前后按钮,捆绑Carousel组件的next()和prev()方法,改变button的不透明度,使得鼠标移动上去显示即可。
实现过程
js代码
render() {
return (
<Fragment>
<Button
className={styles.leftButton}
style={{ left: 26 }}
onClick={() => {
// 通过获取走马灯dom,调用Carousel的prev()方法
this.card.prev();
}}
>
<IconFont type="icon-previous" />
</Button>
<Button
className={styles.rightButton}
style={{ right: 26 }}
onClick={() => {
// 通过获取走马灯dom,调用Carousel的next()方法
this.card.next();
}}
>
<IconFont type="icon-next" />
</Button>
<Carousel
ref={e => {
// 走马灯dom名card
this.card = e;
}}
// autoplay
>
{this.renderRows()}
</Carousel>
</Fragment>
);
}
less文件
.leftButton {
margin-top: 310px;
border: none;
outline: 0;
padding: 0;
height: 36px;
width: 36px;
transition: 3s;
border-radius: 50%;
background-color: #f8f8ff;
color: #ff0000;
position: absolute;
top: 50%;
z-index: 10;
transform: translateY(-50%);
text-align: center;
font-size: 12px;
cursor: pointer; // 鼠标指针移上去显示为“小手”
opacity: 0.05; // 默认不透明度0.05,几乎不可见
}
// 鼠标悬浮上去不透明度变为1,可见
.leftButton:hover {
opacity: 1;
}