欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序蓝色风格收件人地址信息列表页设计制作开发教程

    2018-08-09 09:37 来源/作者:懒人模板 分类:小程序教程  « »
    本文给大家带来的是微信小程序蓝色风格收件人地址信息列表页设计制作开发教程,制作好以后效果图如下:
    一、wxml页面代码如下:
    <!--pages/addressIndexMember/addressIndexMember.wxml-->
    
    <block wx:for="{{address}}">
    
    <view class="address">
        <view class="namemobile">
          <text class="name">收件人: <text class="common">{{item.name}}</text> </text>
          <text class="mobile">电话:<text class="common">{{item.mobile}}</text></text>
        </view>
        <view class="country">
            <text class="topic">
              国家/省州/城市/邮编:
            </text>
            <text class="cou-detail">
              {{item.country}}
            </text>
            <view class="detail">
              <text class="topic">
                收货地址: 
              </text>
              <text class="de-detail">
                {{item.detail}}
              </text>
            </view>
          </view>
        <view class="hr"></view>
          <view class="bottom">
          <view class="wrap">
            <checkbox class="check" color="#f9364f" value="true" checked='{{item.default}}'/>
            <text class="topic">默认地址{{item.default}}</text>
          </view>
            <view class="button-group">
                <view class="edit">
                    <image src="../../images/member/addressEdit.png" class="img"></image>
                    <text class="action">编辑</text>
                </view>
                <view class="delete">
                    <image src="../../images/member/addressDelete.png" class="img"></image>
                    <text class="action">删除</text>
                </view>
            </view>
          </view>
    </view>
    </block>
    <view class="add-button">
      <button class="btn" size="default" type="primary" style="background-color:#0398e7;">+添加新地址</button>
    </view>
    

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议