24-微信小程序商城 收货地址列表（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）

收货地址列表

本节主要讲解收货地址列表界面的实现。效果如图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）微信小程序学习路线 http://www.hzyaoyi.cn/

（2）Java微信小程序商城系统指导 https://ke.qq.com/course/3066521

（3）PHP微信小程序商城系统指导 https://ke.qq.com/course/3066518

（4）微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/

标签：微信,top,程序,20rpx,padding,item,商城
来源： https://blog.51cto.com/u_13898481/2890828