微信小程序首页局部新闻列表滚动与展示

如题，做一个首页局部的滚动

思路：使用组件swiper设置滚动方向

演示

---

话不多说上代码：

wxml:

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;

}