前言

有时,我们在处理大量信息排版的时候,会很头疼。不妨采用Card卡片类排版。

Card类的优点:

  • 信息清晰
    • 简约
    • 多列表展示

预览图

avatar
avatar

WXML代码

 <view class='card  b-shadow'>
<view class='nearCard-fr'>
<view>日期:
<text class='c-green'>{{item.useDate}}</text>
</view>
<view>车型:
<text class='c-green'>{{item.cx}}</text>
</view>
<view>时长:
<text class='c-green'>{{item.time}}</text>
</view>
<view>费用:
<text class='c-green'>{{item.feiyong}}</text>
</view>
</view>
</view>

这里写的是网上复制过来的,预览图中的代码杂乱,就不一一展示了。实现的效果是一样的。

WXSS代码展示

.card {
width: 95%;
background-color: #fff;
margin: 20rpx auto 0;
border-radius: 20rpx;
}

.card-shadow {
box-shadow: 10rpx 10rpx 20rpx #999;
}
.nearCard-fr {
font-size: 27rpx;
line-height: 50rpx;
width: 60%;
margin-left: 10%;
margin-top: 15rpx;
color: #999;
}

.nearCard-fr text {
font-size: 22rpx;
}
.c-green {
color: #41aaa8;
}

rpx: 可以根据屏幕宽度进行自适应,微信小程序中特有的像素单位
box-shadow: 属性向框添加一个或多个阴影。
这里在 www.w3school.com 进行演示不同的阴影效果(注:html中对div元素的阴影,同样适用于微信小程序,只不过是对于view块状元素的添加阴影)

示例:

  • background-color: #fff;
  • box-shadow: 10px 10px 20px #999;
    ( 下、左、右边阴影按顺序类推)
    avatar
    avatar

你还可以:

  • 更改阴影颜色background-color