本文给大家带来的是微信小程序整洁的商城个人中心页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<view class="personal_info">
<view class="photo_wrap">
<image src="{{userInfo.avatarUrl}}" class="photo"></image>
</view>
<view class="nickname">
{{userInfo.nickName}}
</view>
</view>
<view class="wode_item_wrap">
<view class="wode_item" wx:for="{{mode}}">
{{item}}
<span class="arrow_wrap"></span>
</view>
</view>
<view class="wode_out">退出</view>
|
二、wxss样式文件代码如下：
.personal_info {
padding: 20px 0;
background-color: #FFF;
}
.photo_wrap {
text-align: center;
}
.photo {
width: 90px;
height: 90px;
border-radius: 90px;
}
.nickname {
margin-top: 15px;
text-align: center;
color: #696969;
}
.wode_item_wrap {
background-color: #FFF;
font-size: 14px;
margin-top: 10px;
border-top: 1px solid #E5E5E5;
}
.wode_item {
height: 45px;
border-bottom: 1px solid #E5E5E5;
padding: 0 10px;
line-height: 45px;
position: relative;
}
.arrow_wrap {
position: absolute;
width: 50px;
height: 45px;
right: 0;
top: 0;
background-image: url(../../image/icon-arrow.png);
background-repeat: no-repeat;
background-size: 16px;
background-position: 17px 14px;
}
.wode_out {
height: 45px;
line-height: 45px;
text-align: center;
background-color: #FFF;
margin-top: 10px;
border-bottom: 1px solid #E5E5E5;
border-top: 1px solid #E5E5E5;
}
|
三、js页面代码如下：
var app = getApp();
Page({
data: {
userInfo: {},
mode: ['我的收藏','我的订单','我的地址','联系客服','关于我们']
},
onLoad: function() {
var that = this;
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.setData({
userInfo: res.userInfo
})
}
})
}
});
}
})
|
.jpg)
.jpg)
