微信小程序家装四件套橙色个人中心样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<view class="user-head">
    <view class="center" bindtap = "userdata">
        <view class="user-img">
            <image src="{{userInfo.avatarUrl}}"/>
        </view>
        <view class="user-text">
            <text class="text">{{userInfo.nickName}}</text>
        </view>
    </view>
</view>

<view class="list">
    <view class="item" bindtap="order">
        <image src="../../images/dingdan.png"/>我的订单
        <text class="jump">〉</text>
    </view>
    <view class="item" bindtap="address">
        <image src="../../images/ding.png"/>我的地址
        <text class="jump">〉</text>
    </view>
</view>

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

/**index.wxss**/

.user-head {
  background:#fff;
  height:250px;
  position: relative;
  display:-webkit-flex;
	display:flex;
	width:100%;
  justify-content:center;
  align-content:center;
}
.user-head .center{
    display: flex;
    flex-flow: column;
    padding-top: 50px;
}
.user-img{
  width:100px;
  height: 100px;
}

.user-img image {
  width:80px;
  height: 80px;
  border-radius: 50%;
  border:10px solid #f4f5e5;
}
.user-text{
  text-align:center;
  width:100%;
}
.user-text text{
  font-family: 微软雅黑;
  color:#333;
  display: block;
  font-size: 40rpx;
  margin-top: 30rpx;
}


.list {
  background: #fff;
  margin-top:50rpx;
}
.list .item{
  padding:20px 15px;
  font-size: 14px;
  color:#333;
  position: relative;
  border-bottom: 1px solid #f3f3f3;
}
.list .item::last-child{
  border:none;
}
.list .item image {
  width:16px;
  height: 16px;
  display: inline-block;
  vertical-align:middle;
  margin-right:5px;
}
.list .item .jump{
  position: absolute;
  right:20px;
  color:#999;
}

三、js页面代码如下：

//index.js
//获取应用实例
var app = getApp()
var sta = require("../../utils/statistics.js");
Page({
  data: {
    userInfo: {},
  },
  onShow:function (){
    sta();
  },
  onLoad: function () {
    var that = this
    app.getUserInfo(function (userInfo){
         that.setData({
              userInfo:userInfo
          });
    })
  },
  userdata:function (){
      wx.navigateTo({url: "/pages/userdata/index"})
  },
  address: function (){
      wx.navigateTo({url:"/pages/address/index"});
  },
  
  order:function (){
    //订单
    wx.navigateTo({url: "/pages/order/index"})
  },
  keep:function () {
    //收藏
  },
  share:function (){
    //分享
  }
})

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