devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：菜鸟追梦旅行 | 2024-03-14 05:41:08

赞

踩

微信小程序个人中心页面

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

一、效果预览

     

 二、源代码

abouthe.json文件

  1. {
  2.   "usingComponents": {},
  3.   "navigationBarBackgroundColor": "#F2F2F2",
  4.   "backgroundTextStyle": "light",
  5.   "disableScroll":true,
  6.   "navigationStyle": "custom"
  7. }

abouthe.wxml文件

  1. <!-- 用户列表选项 -->
  2. <scroll-view class='scbg' scroll-y='true'>
  3.   <view class="parent_catainer">
  4.     <!-- 头部 -->
  5.     <!-- style="background-image: url('/images/persons/mind_head_bg.jpg');" -->
  6.     <view class="container_head">
  7.       <image class="head_img" src="/images/mind_head_bg.jpg"></image>
  8.       <view class="head_pers_info" bindtap="head_pers_info">
  9.         <view class="head_pic">
  10.           <image class="head_pic_content" mode="aspectFit" src="/images/lemon.png"></image>
  11.         </view>
  12.         <view class="inf_content">
  13.           <text class="user_info">李大锤</text>
  14.           <text class="family_info_ct_phone">联系电话：17365963369</text>
  15.           <text class="family_info_ct">关联账号：王老师  </text>
  16.         </view>
  17.       </view>
  18.     </view>
  19.  
  20.     <view class="userItemListView">
  21.       <view class="my_priview_md" bindtap="myappointpage">
  22.         <image class="my_priview" src="/images/mine_fiend.png"></image>
  23.         <text>我的预约</text>
  24.         <view class="arrow"></view>
  25.       </view>
  26.       <view class="my_priview_md" bindtap="openmyorder">
  27.         <image class="my_priview" src="/images/mine_fiend.png"></image>
  28.         <text>我的订单</text>
  29.         <view class="arrow"></view>
  30.       </view>
  31.       <view class="my_priview_md" bindtap="myaid">
  32.         <image class="my_priview" src="/images/mine_fiend.png"></image>
  33.         <text>我的救助</text>
  34.         <view class="arrow"></view>
  35.       </view>
  36.       <view class="my_priview_md" bindtap="myfriend">
  37.         <image class="my_priview" src="/images/mine_fiend.png"></image>
  38.         <text>我的亲友</text>
  39.         <view class="arrow"></view>
  40.       </view>
  41.       <view class="my_priview_md" bindtap="mycollection">
  42.         <image class="my_priview" src="/images/mine_fiend.png"></image>
  43.         <text>我的收藏</text>
  44.         <view class="arrow"></view>
  45.       </view>
  46.     </view>
  47.  
  48.     <view class="userItemListView">
  49.       <view class="my_priview_md" bindtap="bind">
  50.         <image class="my_priview" src="/images/mine_fiend.png"></image>
  51.         <text>个人资料</text>
  52.         <view class="arrow"></view>
  53.       </view>
  54.       <view class="my_priview_md" bindtap="updatepassword">
  55.         <image class="my_priview" src="/images/mine_fiend.png"></image>
  56.         <text>修改密码</text>
  57.         <view class="arrow"></view>
  58.       </view>
  59.       <view class="my_priview_md" bindtap="aboutus" hidden="true">
  60.         <image class="my_priview" src="/images/mine_fiend.png"></image>
  61.         <text>关于我们</text>
  62.         <view class="arrow"></view>
  63.       </view>
  64.       <view class="my_priview_md" bindtap="logout">
  65.         <image class="my_priview" src="/images/mine_fiend.png"></image>
  66.         <text>退出登录</text>
  67.         <view class="arrow"></view>
  68.       </view>
  69.     </view>
  70.  
  71.     <view class="last_view"></view>
  72.   </view>
  73. </scroll-view>

abouthe.wxss文件

  1. /* 用户列表选项样式 */
  2. page {
  3.   width: 100%;
  4.   height: 100%;
  5.   background:#f0f0f0;
  6. }
  7. .parent_catainer{
  8.   background:#f0f0f0;
  9. }
  10.  
  11. /* 头部背景图片 */
  12. .container_head{
  13.   height: 370rpx;
  14.   width: 100%;
  15.   display: flex;
  16.   justify-content: flex-end;
  17.   align-items: flex-end;
  18. }
  19.  
  20. .head_img {
  21.   position: absolute;
  22.   width: 100%;
  23.   height: 370rpx;
  24. }
  25.  
  26. .head_pers_info{
  27.    height: 200rpx;
  28.    width: 100%;
  29.    margin-bottom: 50rpx;
  30.    justify-content: left;
  31.    display: flex;
  32.    align-items: center;
  33.    flex-direction: row;
  34.    position: absolute;
  35. }
  36.  
  37. .head_pic{
  38.   width: 120rpx;
  39.   height: 120rpx;
  40.   border-radius: 60rpx;
  41.   background-color: #08cbb0;
  42.   color: #ffffff;
  43.   align-items: center;
  44.   display: flex;
  45.   justify-content: center;
  46. }
  47. .head_pic_content{
  48.   position: absolute;
  49.   width: 110rpx;
  50.   height: 110rpx;
  51.   border-radius: 55rpx;
  52.   background-color: white;
  53. }
  54.  
  55. .head_pic{
  56.   margin-left: 5%;
  57. }
  58.  
  59. .inf_content{
  60.   display: flex;
  61.   flex-direction: column;
  62.   margin-left: 10rpx;
  63.   align-items: flex-start;
  64.   justify-content: center;
  65.    color: #ffffff;
  66.    padding-bottom: 5rpx;
  67. }
  68.  
  69. .user_info{
  70.   text-align: left;
  71.   font-size: 32rpx;
  72.   font-weight: bold;
  73.   margin-bottom: 8rpx;
  74. }
  75.  
  76. .family_info_ct_phone{
  77.   text-align: center;
  78.   justify-content: center;
  79.   font-size: 28rpx;
  80.   margin-bottom: 2rpx;
  81. }
  82.  
  83. .family_info_ct{
  84.   text-align: center;
  85.   justify-content: center;
  86.   font-size: 28rpx;
  87.   margin-bottom: 2rpx;
  88.   width: 500rpx;
  89.   overflow: hidden;
  90.   white-space: nowrap;
  91.   text-align: left;
  92.   text-overflow: ellipsis;
  93. }
  94.  
  95. .userItemListView{
  96.   background: #fff;
  97.   padding: 0 0rpx;
  98.   margin: 24rpx 0;
  99. }
  100.  
  101. .userItemListView > view{
  102.   height: 94rpx;
  103.   line-height: 94rpx;
  104.   padding-left: 50rpx;
  105.   border-bottom: 1rpx solid #F1F1F1;
  106.   position: relative;
  107. }
  108.  
  109. /* 移除最后一个元素的下边框 */
  110. .userItemListView > view:last-child{
  111.   border: none;
  112. }
  113.  
  114. .my_priview_md{
  115.   display: flex;
  116.   align-items: center;
  117. }
  118.  
  119. .my_priview{
  120.   width: 50rpx;
  121.   height: 50rpx;
  122.   margin-right: 10rpx;
  123. }
  124.  
  125. .arrow{
  126.   width: 16rpx;
  127.   height: 16rpx;
  128.   border-top: 4rpx solid #999;
  129.   border-right: 4rpx solid #999;
  130.   /* 旋转45度 */
  131.   transform: rotate(45deg);
  132.   /* 调整位置 */
  133.   position: absolute;
  134.   right: 30rpx;
  135.   top: 38rpx;
  136. }
  137.  
  138. .userItemListView text{
  139.   font-size: 30rpx;
  140. }
  141.  
  142. .last_view{
  143.    background:#f0f0f0;
  144.    width: 100%;
  145.    height:1200rpx;
  146. }
  147.

abouthe.ts文件

  1. // pages/personal/myinfo.ts
  2. Page({
  3.  
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8.  
  9.   },
  10.  
  11.   /**
  12.    * 生命周期函数--监听页面加载
  13.    */
  14.   onLoad() {
  15.  
  16.     var that = this;
  17.   },
  18.  
  19.   /**
  20.    * 生命周期函数--监听页面初次渲染完成
  21.    */
  22.   onReady() {
  23.  
  24.   },
  25.  
  26.   // 退出登录
  27.   logout: function () {
  28.  
  29.     wx.showModal({
  30.       content: '确定退出登录吗？',
  31.       cancelColor: '#666666',//666666
  32.       confirmColor: '#666666',
  33.       success(res) {
  34.         if (res.confirm) {
  35.           wx.reLaunch({
  36.             url: '/pages/login/login'
  37.           })
  38.           console.log('用户点击确定')
  39.         } else if (res.cancel) {
  40.           console.log('用户点击取消')
  41.         }
  42.       },
  43.       fail: function (res) { },//接口调用失败的回调函数
  44.       complete: function (res) { },//接口调用结束的回调函数（调用成功、失败都会执行
  45.     })
  46.  
  47.   },
  48.   /**
  49.    * 生命周期函数--监听页面显示
  50.    */
  51.   onShow() {
  52.     wx.hideHomeButton();
  53.     wx.hideShareMenu();
  54.   },
  55.  
  56.   /**
  57.    * 生命周期函数--监听页面隐藏
  58.    */
  59.   onHide() {
  60.  
  61.   },
  62.  
  63.   /**
  64.    * 生命周期函数--监听页面卸载
  65.    */
  66.   onUnload() {
  67.  
  68.   },
  69.  
  70.   /**
  71.    * 页面相关事件处理函数--监听用户下拉动作
  72.    */
  73.   onPullDownRefresh() {
  74.  
  75.   },
  76.  
  77.   /**
  78.    * 页面上拉触底事件的处理函数
  79.    */
  80.   onReachBottom() {
  81.  
  82.   },
  83.  
  84.   /**
  85.    * 用户点击右上角分享
  86.    */
  87.   onShareAppMessage() {
  88.  
  89.   }
  90. })

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/232474
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号