微信小程序 开发，经常会遇到个人中心页面 的需求，为了方便大家使用，决定将个人总想页面进行开源，以供大家参考交流。
一、效果预览
二、源代码
abouthe.json文件
{
"usingComponents": {},
"navigationBarBackgroundColor": "#F2F2F2",
"backgroundTextStyle": "light",
"disableScroll":true,
"navigationStyle": "custom"
}abouthe.wxml文件
<!-- 用户列表选项 -->
<scroll-view class='scbg' scroll-y='true'>
<view class="parent_catainer">
<!-- 头部 -->
<!-- style="background-image: url('/images/persons/mind_head_bg.jpg');" -->
<view class="container_head">
<image class="head_img" src="/images/mind_head_bg.jpg"></image>
<view class="head_pers_info" bindtap="head_pers_info">
<view class="head_pic">
<image class="head_pic_content" mode="aspectFit" src="/images/lemon.png"></image>
</view>
<view class="inf_content">
<text class="user_info">李大锤</text>
<text class="family_info_ct_phone">联系电话：17365963369</text>
<text class="family_info_ct">关联账号：王老师 </text>
</view>
</view>
</view>
<view class="userItemListView">
<view class="my_priview_md" bindtap="myappointpage">
<image class="my_priview" src="/images/mine_fiend.png"></image>
<text>我的预约</text>
<view class="arrow"></view>
</view>
<view class="my_priview_md" bindtap="openmyorder">
<image class="my_priview" src="/images/mine_fiend.png"></image>
<text>我的订单</text>
<view class="arrow"></view>
</view>
<view class="my_priview_md" bindtap="myaid">
<image class="my_priview" src="/images/mine_fiend.png"></image>
<text>我的救助</text>
<view class="arrow"></view>
</view>
<view class="my_priview_md" bindtap="myfriend">
<image class="my_priview" src="/images/mine_fiend.png"></image>
<text>我的亲友</text>
<view class="arrow"></view>
</view>
<view class="my_priview_md" bindtap="mycollection">
<image class="my_priview" src="/images/mine_fiend.png"></image>
<text>我的收藏</text>
<view class="arrow"></view>
</view>
</view>
<view class="userItemListView">
<view class="my_priview_md" bindtap="bind">
<image class="my_priview" src="/images/mine_fiend.png"></image>
<text>个人资料</text>
<view class="arrow"></view>
</view>
<view class="my_priview_md" bindtap="updatepassword">
<image class="my_priview" src="/images/mine_fiend.png"></image>
<text>修改密码</text>
<view class="arrow"></view>
</view>
<view class="my_priview_md" bindtap="aboutus" hidden="true">
<image class="my_priview" src="/images/mine_fiend.png"></image>
<text>关于我们</text>
<view class="arrow"></view>
</view>
<view class="my_priview_md" bindtap="logout">
<image class="my_priview" src="/images/mine_fiend.png"></image>
<text>退出登录</text>
<view class="arrow"></view>
</view>
</view>
<view class="last_view"></view>
</view>
</scroll-view>
abouthe.wxss文件文章来源：https://www.toymoban.com/news/detail-503946.html
/* 用户列表选项样式 */
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;
/* 旋转45度 */
transform: rotate(45deg);
/* 调整位置 */
position: absolute;
right: 30rpx;
top: 38rpx;
}
.userItemListView text{
font-size: 30rpx;
}
.last_view{
background:#f0f0f0;
width: 100%;
height:1200rpx;
}
abouthe.ts文件文章来源地址https://www.toymoban.com/news/detail-503946.html
// pages/personal/myinfo.ts
Page({
/**
* 页面的初始数据
*/
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() {
}
})到了这里，关于微信小程序个人中心页面 案例的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
