到了实现三个菜单里面最后一个个人中心页面的时候了，这个没有自己写，因为写到现在虽然对小程序前端有了一些了解，但是还谈不上很熟悉，所以借鉴了一个网友的文章，在他的基础上自己改了一下，因为之前的我直接用是显示不全的，不过改了之后不如之前好看，后面会附上这个网友的文章地址。
最终我实现的效果是这样的：
其实用到的东西并不多，主要还是一些前端的样式，下面是实现步骤和代码。
第一，准备图片素材
我依旧还是从阿里矢量图上找的图片，下面附上网站：
http://www.iconfont.cn/collections/detail?cid=29
找到自己需要的矢量图下载png格式就可以了
第二，目录结构
第三，实现代码
.wxml文件
<!--pages/user/user.wxml-->
<view class="mine-wrapper">
<view class="avatar-wrapper">
<view>
<view class="avatar">
<image style="border-radius:50%;" src="{{userinfo.avatarUrl ? userinfo.avatarUrl:'/images/user/user1.png'}}"></image>
</view>
<view class="text">
<text wx:if="{{userinfo.nickName}}">{{userinfo.nickName}}</text>
<text wx:else bindtap="toLogin">注册 / 登录</text>
</view>
<view class="text">
<text wx:if="{{userSign==2}}">{{"您还没有填写真实信息,请填写"}}</text>
<text wx:elif="{{userSign==1}}">{{"会员用户"}}</text>
</view>
</view>
</view>
<view class="list-wrapper">
<view class="alllists">
<block wx:for="{{menuitems}}" wx:key="menu_for">
<navigator url="{{item.url}}" class="lists">
<view class='content'>
<view class="listimg">
<image src="{{item.icon}}"></image>
</view>
<view class="listtext">{{item.text}}</view>
<view class="listicon">{{item.tips}}</view>
<view class="arrows">
<image src="{{item.arrows}}"></image>
</view>
</view>
</navigator>
<!-- 分割线 -->
<view class="divLine"></view>
</block>
</view>
</view>
</view>
.js文件
// pages/user/user.js
var _app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
menuitems: [
{ text: '个人资料', url: '#', icon: '/images/user/user1.png', tips: '', arrows: '/images/user/arrows.png' },
{ text: '邀请好友', url: '#', icon: '/images/user/user2.png', tips: '', arrows: '/images/user/arrows.png' },
{ text: '积分兑换', url: '#', icon: '/images/user/user3.png', tips: '', arrows: '/images/user/arrows.png' },
{ text: '帮助说明', url: '#', icon: '/images/user/user4.png', tips: '', arrows: '/images/user/arrows.png' }
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
}).wxss
/* pages/user/user.wxss */
.avatar-wrapper {
background: #1b82d1;
padding: 25px 0;
}
.avatar-wrapper .avatar {
margin: 0 auto;
text-align: center;
}
.avatar-wrapper .avatar image {
width: 100px;
height: 100px;
}
.avatar-wrapper .text {
text-align: center;
color: #fff;
}
.listimg image {
margin-right: 5px;
vertical-align: middle;
width: 20px;
height: 20px;
}
.content{
display: flex;
margin-top: 10px;
margin-bottom: 10px;
}
/*分割线样式*/
.divLine{
background: #E0E3DA;
width: 100%;
height: 5rpx;
}
.arrows image {
vertical-align: middle;
width: 15px;
height: 15px;
margin-left: 500rpx;
}
/* user.wxss */最后附上借鉴的网友的文章，感谢！