【教程】小程序的list-item封装
最终效果如图:
教程
核心仍然是CSS的掌握,想实现这种list-item,最简单的方式便是用CSS3中的flex布局了。
下面是WXML代码,以及CSS代码:
WXML:
<view class="c-task" bindtap="tapTask">
<view class="card">
<view class="cover">
<image class="image" src="{{contestItem.images[0]}}" mode="aspectFill"></image>
</view>
<view class="content">
<view class="title">{{contestItem.name}}</view>
<view class="tip">
<view >报名截止:{{contestItem.timeEnd}}</view>
</view>
</view>
</view>
</view>
CSS:
.c-task .card {
border-radius: 4px;
background-color: white;
}
.card .cover .image {
height: 100px;
width: 100%;
background-color: #f8f8f8;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
display:block;
}
.card .content {
padding: 8px;
border: 1px solid #f0f7fa;
border-top: none;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.content .title {
height: 40px;
font-size: 14px;
color: #1a1a1a;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.card .tip {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
font-size: 12px;
color: #777;
}
.card .price {
color: red;
font-size: 15px;
}
在最后,我建议大家为了移动端适配不同屏幕时,可以将你的rpx或px单位换成百分比,这样基本可以做到不同分辨率,例如Iphone6/7/8和iphone4不同分辨率的适配