收货地址列表
本节主要讲解收货地址列表界面的实现。效果如图15-5所示。
1.布局分析
结构布局分析示意如图15-6所示。
根据上面的布局分析，我们会产生基础的框架，代码示例如下：
<view ><view ><text>测试</text><text class='right'>18670321728</text></view><view ><text>浙江省杭州市江干区</text><text>东岗路118号</text><text>雷恩国际</text></view><view ><view><switch type="checkbox" bindchange="beDefault" data-id="1" checked="{{true}}" /><text>设为默认</text></view><view ><text>编辑</text> | <text>删除</text></view></view></view>
2.功能实现
.wxml文件代码示例如下：
<view class='list-item' ><view class='item-head'><text>测试</text><text class='right'>18670321728</text></view><view class='item-desc'><text>浙江省杭州市江干区</text><text>东岗路118号</text><text>雷恩国际</text></view><view class='item-edit'><view class='left'><switch type="checkbox" bindchange="beDefault" data-id="1" checked="{{true}}" /><text class='ctr'>设为默认</text></view><view class='right'><text bindtap="navigateToEdit" data-id="1">编辑</text> -<text bindtap="delAddr" data-id="1">删除</text></view></view></view>
.wxss文件代码示例如下：
.list-item {font-size: 16px;padding: 30rpx;padding-bottom: 80rpx;margin-bottom: 30rpx;background: white;}.item-head {padding-bottom: 20rpx;}.item-desc {font-size: 16px;}.item-edit {margin-top: 20rpx;padding-top: 20rpx;border-top: 1px #ccc solid;}.right {padding-top: 10rpx;float: right;padding-right: 20rpx;}.left {float: left;vertical-align: middle;}.chk-active {color: #f31;}.ctr {position: relative;top: 6rpx;}
小程序商城配备了javaweb、php、asp、net几个版本的后台、其他版本陆续制作中 【微信小程序参考资料】
（1）微信小程序学习路线 /
（2）Java微信小程序商城系统指导 /course/3066521
（3）PHP微信小程序商城系统指导 /course/3066518
（4）微信官方文档 https://developers./miniprogram/dev/framework/
24-微信小程序商城 收货地址列表（微信小程序商城开发 小程序毕业设计 小程序源代码）（黄菊华-微信小程序开发教程）
