微信小程序首頁(yè)局部新聞列表滾動(dòng)與展示

如題,做一個(gè)首頁(yè)局部的滾動(dòng)

思路:使用組件swiper設(shè)置滾動(dòng)方向


演示



話不多說上代碼:

wxml:


wxml

wxss:

/* 新聞滾動(dòng) */

.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;

}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容