<view class="address-view"> <block wx:for="{{addressList}}" wx:for-item="address" wx:key="{{address_id}}"> <view class="address-item"> <view class="select-view"> <image src="../../images/selectAddress.png"></image> </view> <view class="content-view"> <view class="top"> <text class="name">{{address.name}}</text> <text class="phone">{{address.phone}}</text> </view> <text class="address">{{address.area}}{{address.detail_address}}</text> </view> <view class="edit-view"> <image src="../../images/editAddress.png"></image> </view> </view> </block> </view> |
page{ background-color: #f5f4f4; } .address-view{ margin-top: 20rpx; border-bottom: solid #d8d8d8 1rpx; } .address-item{ width: 100%; height: 130rpx; display: flex; flex-direction: row; background-color: white; border-top: solid #d8d8d8 1rpx; } .select-view{ width: 80rpx; height: 100%; } .select-view image{ width: 30rpx; height: 30rpx; margin: 50rpx 5rpx 50rpx 40rpx ; } .content-view{ display: flex; flex-direction: column; flex-grow: 0; justify-content: center; font-size: 30rpx; } .content-view .top{ margin-bottom: 5rpx; } .content-view .name{ font-size: 36rpx; } .content-view .phone{ color: #4a5054; margin-left: 20rpx; } .content-view .address{ width: 550rpx; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #4a5054 } .edit-view{ width: 120rpx; height: 100%; } .edit-view image{ width: 30rpx; height: 30rpx; margin: 50rpx 40rpx 50rpx; } |
Page({ data:{ addressList:[ { "name":"小明", "phone":"15010069963", "area":"北京市昌平区回龙观", "detail_address":"龙禧苑2区10号楼3单元403", "is_default":false, "address_id":"1" }, { "name":"小红", "phone":"15010069963", "area":"北京市昌平区回龙观", "detail_address":"北店嘉园21号楼3单元403", "is_default":false, "address_id":"2" }, { "name":"小熊", "phone":"15010069963", "area":"北京市昌平区回龙观", "detail_address":"北店嘉园21号楼3单元403", "is_default":false, "address_id":"3" } ] }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } }) |
模板简介:该模板名称为【微信小程序绿色顶部我的地址选择页面样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。