最近做了h5 项目,要实现横滑动的效果,使用overflow 的属性能实现
看下css 的实现
.list {
overflow-x: scroll;
overflow-y: hidden;
margin-top: 20px;
align-items: center;
width: 100%;
hight: 100%;
}
.outside {
display: flex;
flex-direction: row;
padding-left: 30px;
padding-right: 10px;
}
.item {
display: flex;
width: 124px;
flex-direction: column;
align-items: center;
position: relative;
}
.img {
background-size: 100% 100%;
background-repeat: no-repeat;
width: 124px;
height: 124px;
border-radius: 50%;
}
.name {
color: #4e0808;
width: 124px;
font-size: 24px;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
text-align: start;
}
我们看下 js 中的实现
<div className="list" style{
{width:this.