19-微信小程序商城下单页面收货地址（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-

发表时间：2020-11-17

发布人：葵宇科技

浏览次数：104

下单页面收货地址
本节主要讲解下单页面中顶部收货地址界面的实现。效果如图14-7所示。
在这里插入图片描述

1.布局分析

结构布局分析示意如图14-8所示。
在这里插入图片描述
根据上面的布局分析，我们会产生基础的框架，代码示例如下：

<view>
   <image></image>

   <view>
<radio-group>
           <view>
		<radio  value="公司" checked="{{true}}" >黄菊华-13516821613</radio>
<text>杭州市余杭区东港路118号雷恩国际13楼</text>
</view>
           <view>
		<radio  value="家庭" >黄菊华-13516821613</radio>
<text>重庆市忠县香山路12号</text>
</view>
       </radio-group> 
</view>        
 
    <view>
           <button size='mini'>新</button>
    </view>
</view>

根据效果图分析出框架的层级后，在每个层级的view加上样式，编码实现即可。
? 第1层：定义产品链接 navigator，无需样式。
? 第2层：定义flex模式，默认从左到右排列。
? 第3层：图片样式，多行文字的总体排列样式。

2.功能实现

.wxml文件代码示例如下：

  <view class="wx-cells">
   <image class="wx-cell-icon" src="/img/dizhi.png"></image>

   <view class="wx-cell-text">
<radio-group>
           <view>
		<radio  value="公司" checked="{{true}}" >黄菊华-13516821613</radio>
<text>杭州市余杭区东港路118号雷恩国际13楼</text>
</view>
           <view>
		<radio  value="公司" >黄菊华-13516821613</radio>
<text>重庆市忠县香山路12号</text>
</view>
       </radio-group> 
</view>        
 
    <view class="wx-cell-arrow">
           <button size='mini'>新</button>
    </view>
</view>

.wxml文件样式代码示例如下：

/*收货地址*/
.wx-cells {
  width: 100%;
  margin-top: 15rpx;
  font-size: 34rpx;
  border-top: 1rpx solid #d9d9d9;
  border-bottom: 1rpx solid #d9d9d9;
  background-color: #fff;
  padding: 10rpx 15rpx;
  display: flex;
  align-items: center;  
}
.wx-cell-icon{
  width: 56rpx;
  height: 56rpx;
}
.wx-cell-text{
  flex: 1;
  margin-left: 30rpx;
}
.wx-cell-arrow{
  width: 100rpx;
  height: 56rpx; 
  margin: 10rpx; 
}
.wx-cell-arrow button{ 
  background:  darkgreen ; 
  color:  white; 
  width: 56rpx; 
  display: flex;
  justify-content: center;
}