微信小程序红色风格添加修改收货地址样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<view class="wraper">
	<view bindtap="toAddMoren" class="addressDefault">
		<view class="userInfo">
			<text class="name">杨天佑</text><text class="number">18785500439</text>
		</view>
		<view class="addressInfo">
			<text class="default">[默认]</text><text>上海上海市徐汇区龙华西路20号静安面包房</text>
		</view>
	</view>
	<view class="address">
		<view class="userInfo">
			<text class="name">杨天佑</text><text class="number">18785500439</text>
		</view>
		<view class="addressInfo">
			<text>上海上海市徐汇区龙华西路20号</text>
		</view>
	</view>
	<view class="address">
		<view class="userInfo">
			<text class="name">杨天佑</text><text class="number">18785500439</text>
		</view>
		<view class="addressInfo">
			<text>上海上海市徐汇区龙华西路20号</text>
		</view>
	</view>
	<view bindtap="toAddNew" class="add_address">
		<view>+添加新地址</view>
	</view>
</view>

二、wxss样式文件代码如下：

/* pages/userhome/address/address.wxss */
.addressDefault{
	padding:0rpx 40rpx 20rpx;
	color: #fff;
	background-color: #f12035;
}
.userInfo{
	line-height: 90rpx;
}
.number{
	margin-left: 120rpx;
}
.addressInfo{
	line-height: 50rpx;
}
.addressInfo .default{
	color: #f2d0aa;
}
.address{
	padding:0rpx 40rpx 20rpx;
	border-bottom: 1rpx solid #f3f3f3;
	background: #fff;
}
.add_address{
	width: 600rpx;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	background: #fff;
	position: absolute;
	bottom: 20rpx;
	left: 10%;
	border-radius: 10rpx;
}

三、js页面代码如下：

// pages/userhome/address/address.js
Page({
  data:{},
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  toAddMoren:function(){
     wx.navigateTo({
        url: '../add_moren/add_moren'
      })
  },
  toAddNew:function(){
     wx.navigateTo({
        url: '../add_new/add_new'
      })
  }
})

模板简介：该模板名称为【微信小程序红色风格添加修改收货地址样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。