写一个微信小程序的收货地址界面
时间: 2023-05-13 07:06:17 浏览: 93
好的,以下是一个微信小程序的收货地址界面的代码示例:
```
<view class="container">
<view class="header">收货地址</view>
<view class="address-list">
<view class="address-item">
<view class="name">张三</view>
<view class="phone">138****1234</view>
<view class="address">北京市海淀区中关村大街1号</view>
<view class="edit">编辑</view>
</view>
<view class="address-item">
<view class="name">李四</view>
<view class="phone">139****5678</view>
<view class="address">北京市朝阳区建国路88号</view>
<view class="edit">编辑</view>
</view>
</view>
<view class="add-address">添加新地址</view>
</view>
```
CSS 样式:
```
.container {
padding: 20rpx;
}
.header {
font-size: 28rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.address-list {
margin-bottom: 20rpx;
}
.address-item {
padding: 20rpx;
background-color: #fff;
border-radius: 10rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
margin-bottom: 20rpx;
display: flex;
flex-direction: column;
}
.name {
font-size: 28rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.phone {
font-size: 24rpx;
color: #999;
margin-bottom: 10rpx;
}
.address {
font-size: 24rpx;
color: #999;
margin-bottom: 10rpx;
}
.edit {
font-size: 24rpx;
color: #007aff;
align-self: flex-end;
}
.add-address {
font-size: 28rpx;
font-weight: bold;
color: #007aff;
text-align: center;
}
```
这是一个简单的收货地址界面,包含了已有的收货地址列表和添加新地址的按钮。每个收货地址都包含了收货人姓名、电话和详细地址,并且可以点击编辑按钮进行修改。