微信小程序个人中心页面 案例

微信小程序 开发，经常会遇到个人中心页面 的需求，为了方便大家使用，决定将个人总想页面进行开源，以供大家参考交流。

一、效果预览

 二、源代码

abouthe.JSON文件

{  "usinGComponents": {},  "navigationBarBackgroundColor": "#F2F2F2",  "backgroundTextStyle": "light",  "disableScroll":true,  "navigationStyle": "custom"}

abouthe.wxml文件

                                                                      李大锤          联系电话：17365963369          关联账号：王老师                                              我的预约                                    我的订单                                    我的救助                                    我的亲友                                    我的收藏                                            个人资料                                    修改密码                                          退出登录                        

abouthe.wxss文件

page {  width: 100%;  height: 100%;  background:#f0f0f0;}.parent_catainer{  background:#f0f0f0;}.container_head{  height: 370rpx;  width: 100%;  display: flex;  justify-content: flex-end;  align-items: flex-end;}.head_img {  position: absolute;  width: 100%;  height: 370rpx;}.head_pers_info{   height: 200rpx;   width: 100%;   margin-bottom: 50rpx;   justify-content: left;   display: flex;   align-items: center;   flex-direction: row;   position: absolute;}.head_pic{  width: 120rpx;  height: 120rpx;  border-radius: 60rpx;  background-color: #08cbb0;  color: #ffffff;  align-items: center;  display: flex;  justify-content: center;}.head_pic_content{  position: absolute;  width: 110rpx;  height: 110rpx;  border-radius: 55rpx;  background-color: white;}.head_pic{  margin-left: 5%;}.inf_content{  display: flex;  flex-direction: column;  margin-left: 10rpx;  align-items: flex-start;  justify-content: center;   color: #ffffff;   padding-bottom: 5rpx;}.user_info{  text-align: left;  font-size: 32rpx;  font-weight: bold;  margin-bottom: 8rpx;}.family_info_ct_phone{  text-align: center;  justify-content: center;  font-size: 28rpx;  margin-bottom: 2rpx;}.family_info_ct{  text-align: center;  justify-content: center;  font-size: 28rpx;  margin-bottom: 2rpx;  width: 500rpx;  overflow: hidden;  white-space: nowrap;  text-align: left;  text-overflow: ellipsis;}.userItemListView{  background: #fff;  padding: 0 0rpx;  margin: 24rpx 0;} .userItemListView > view{  height: 94rpx;  line-height: 94rpx;  padding-left: 50rpx;  border-bottom: 1rpx solid #F1F1F1;  position: relative;} .userItemListView > view:last-child{  border: none;}.my_priview_md{  display: flex;  align-items: center;}.my_priview{  width: 50rpx;  height: 50rpx;  margin-right: 10rpx;} .arrow{  width: 16rpx;  height: 16rpx;  border-top: 4rpx solid #999;  border-right: 4rpx solid #999;    transfORM: rotate(45deg);    position: absolute;  right: 30rpx;  top: 38rpx;} .userItemListView text{  font-size: 30rpx;}.last_view{   background:#f0f0f0;   width: 100%;   height:1200rpx;}

abouthe.ts文件

// pages/personal/myinfo.tsPage({    data: {  },    onLoad() {    var that = this;  },    onReady() {  },  // 退出登录  loGout: function () {    wx.showModal({      content: '确定退出登录吗？',      cancelColor: '#666666',//666666      confirmColor: '#666666',      success(res) {        if (res.confirm) {          wx.reLaunch({            url: '/pages/login/login'          })          console.log('用户点击确定')        } else if (res.cancel) {          console.log('用户点击取消')        }      },      fail: function (res) { },//接口调用失败的回调函数      complete: function (res) { },//接口调用结束的回调函数（调用成功、失败都会执行    })  },    onShow() {    wx.hideHomeButton();    wx.hideShareMenu();  },    onHide() {  },    onUnload() {  },    onPullDownRefresh() {  },    onReachBottom() {  },    onShareAppMessage() {  }})

来源地址：https://blog.csdn.net/shi450561200/article/details/128180653