最近做了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.getItemTotalWidth()}}
<div className="outside" style={{width: this.getOutSideTotalWidth()}}
{assistDetails.map((item, index) =>
<div className="item">
<img className="img" src={item.headUrl}></img>
<label className="name">{item.nickName}</label>
</div>
)}
</div>
</div>
我们看到list 区域和outside 都设置了宽度,注意 outside 的宽度值一定要大于list 的区域宽度,不然不滑动
关键还有主要是最外层的属性控制
.list {
overflow-x: scroll;
overflow-y: hidden;
margin-top: 20px;
align-items: center;
width: 100%;
hight: 100%;
}
类似效果是:
类似一个横向滑动的效果