【页面案例汇总】微信小程序个人中心页面

代码示例

---

<view class="container">
  <view class="avatar-wrap">
    <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
    <view class="nick-name">{{userInfo.nickName}}</view>
  </view>
  
  <view class="list">
    <view class="list-item" hover-class="list-item-hover">
      <view class="icon-wrap">
        <icon class="icon" type="friend"></icon>
      </view>
      <view class="text">我的好友</view>
    </view>
    <view class="list-item" hover-class="list-item-hover">
      <view class="icon-wrap">
        <icon class="icon" type="coin"></icon>
      </view>
      <view class="text">我的钱包</view>
    </view>
    <view class="list-item" hover-class="list-item-hover">
      <view class="icon-wrap">
        <icon class="icon" type="setting"></icon>
      </view>
      <view class="text">设置</view>
    </view>
  </view>
</view>

样式：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}

.nick-name {
  font-size: 32rpx;
  margin-top: 10rpx;
}

.list {
  width: 100%;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.list-item:last-child {
  border-bottom: none;
}

.list-item:hover {
  background-color: #f5f5f5;
}

.icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background-color: #f5f5f5;
  margin-right: 20rpx;
}

.icon {
  color: #999;
  font-size: 36rpx;
}

.text {
  font-size: 30rpx;
}

JS：

Page({
  data: {
    userInfo: {} // 存储用户信息
  },

  onLoad: function () {
    // 获取用户信息
    let userInfo = wx.getStorageSync('userInfo');
    if (userInfo) {
      this.setData({ userInfo: userInfo });
    }
  }
});

其中，userInfo 是存储用户信息的变量，在 onLoad 函数中从本地缓存中获取用户信息，并将其保存到 userInfo 变量中。

这个示例中，个人中心页面包括用户头像、昵称和一些功能列表。你可以加入自己需要的其他信息和功能。注意修改和调整样式以适应你的需求。

以上代码仅供参考，具体实现细节和样式可以根据需求自行调整。

---

源码获取方法：

需要完整源码的朋友，希望你能点赞+收藏+评论，然后私信我即可~

会员学习群：【一对一答疑】

如果私信未回复，可添加学习会员小助手咨询（微信：mifankeji77）