如题,做一个首页局部的滚动
思路:使用组件swiper设置滚动方向
话不多说上代码:
wxml:
wxss:
/* 新闻滚动 */
.topRecord {
margin: 0 .3rem .45rem 0;
display: flex;
background: #fff;
width: 100%;
padding: .25rem 0 .25rem 4.5%;
height: 64px;
}
.iconLeft {
height: 44px;
width: 62px;
align-items: center;
padding-top: 10px;
}
.leftImg{
height: 40px;
width: 40px;
}
.topRecList {
width: 80%;
flex: 7;
margin-top: .2rem;
}
.healthList {
width: 90%;
height: 50px;
}
.healthItem{
display: flex;
flex-direction:row;
margin: 2px 2.5% 0.46rem;
align-items: center;
}
.dian{
margin-right: 5px;
height: 3px;
width: 3px;
background: #333;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
.healthInfo{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient:vertical;
width: 94%;
font-size:14px;
}