微信小程序修改个人信息收货地址样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<!--修改收货地址-->
<view class="wraper">
    <view class="listItems">
        <text class="listLeft">收货人姓名: </text>
        <input id="name" class="listRight" type="number" value=" 安若溪哦啊西" name=""/>
    </view>
     <view class="listItems">
        <text class="listLeft">手机号码: </text>
        <input id="name" class="listRight" type="number" value=" 18785500439" name=""/>
    </view>
     <view class="listItems">
        <text class="listLeft">邮政编码: </text>
        <input id="name" class="listRight" type="number" value=" 556607" name=""/>
    </view>
     <view class="listItems">
        <text class="listLeft">所在地区: </text>
        <input id="name" class="listRight" type="number" value=" 贵州省贵阳市云岩区" name=""/>
    </view>
     <view class="listItems">
        <text class="listLeft">详细地址: </text>
        <input id="name" class="listRight" type="number" value=" 龙洞堡机场国安大厦1号楼" name=""/>
    </view>
    <view class="listItems">
        <text class="morenBtn">删除收货地址</text>
    </view>
    <view class="btnGroup">
        <button class="btn">确认修改</button>
    </view>
</view>

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

page{
    background: #fff;
}
.wraper .listItems{
    padding: 0 30rpx;
    height: 120rpx;
    line-height: 120rpx;
    border-bottom: 1rpx solid #f3f3f3;
}
.wraper .listItems .listLeft{
    float: left;
}
.wraper .listItems .listRight{
    float: left;
    margin-top: 40rpx;
    width: 420rpx;
    margin-left: 20rpx;
}
.wraper .listItems .morenBtn{
    color: #f12035;
}
.btnGroup .btn{
    width: 80%;
    height: 90rpx;
    border-radius: 45rpx;
    background: #f12035;
    color: #fff;
    margin-top: 30rpx;
}

三、js页面代码如下：

Page({
  data:{},
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  tosearch:function(){
    wx.navigateTo({
        url: '../searchProduct/searchProduct'
      })
  },
  topay:function(){
     wx.navigateTo({
        url: '../pay/pay'
      })
  }
})

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