devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

小白开发微信小程序43--个人中心页面布局2_微信小程序写个人中心页面

作者：从前慢现在也慢 | 2024-03-21 08:08:29

赞

踩

微信小程序写个人中心页面

  1. wxml

  1. <view>
  2.     <!-- 顶部图片 -->
  3.     <view>
  4.         <image class="indeximage" src="/images/person.jpg" mode="widthFix"></image>
  5.     </view>
  6.     <!-- 用户登录 -->
  7.     <view>
  8.         <block>
  9.             <!-- 未登录 -->
  10.             <view wx:if="{{!isLogined}}" class="no-login-title">
  11.                 <text>您尚未登录，</text>
  12.                 <text class="btn-login">点我登录</text>
  13.             </view>
  14.             <!-- 已登录 -->
  15.             <view wx:else class="no-login-title">
  16.                 <button type="primary" class="btn-exit">退出登录</button>
  17.             </view>
  18.         </block>
  19.     </view>
  20.     <!-- 用户背景 -->
  21.     <view class="user-info">
  22.         <!-- 未登录 -->
  23.         <view wx:if="{{!isLogined}}" class="user-info-bg">
  24.             <view class="user-info-wrap">
  25.                 <image src="/images/nologin.jpg"></image>
  26.                 <view class="user-nickname">匿名用户</view>
  27.             </view>
  28.         </view>
  29.         <!-- 已登录 -->
  30.         <view class="user-info-bg">
  31.             <view class="user-info-wrap">
  32.                 <image src="{{userInfo.avatarUrl}}"></image>
  33.                 <view class="user-nickname">{{userInfo.nickName}}</view>
  34.             </view>
  35.         </view>
  36.     </view>
  37.  
  38.     <!-- 操作信息 -->
  39.     <view class="usermenu">
  40.         <view class="address" bindtap="handleaddress">收货地址</view>
  41.         <view class="infocontact" bindtap="contactus">
  42.             <text>联系我们</text>
  43.             <text class="inforight">></text>
  44.         </view>
  45.         <view class="infocontact">
  46.             <text>意见反馈</text>
  47.             <text class="inforight">010-83050808</text>
  48.         </view>
  49.     </view>
  50.  
  51. </view>

  1. wxss

  1. page {
  2.     background-color: #f6f6f6;
  3. }
  4.  
  5. /* 顶部图片 */
  6. .indeximage {
  7.     width: 100%;
  8.     height: 100%;
  9. }
  10.  
  11. /* 登录样式 */
  12. .no-login-title {
  13.     text-align: center;
  14.     font-weight: 600;
  15.     margin: 10rpx 0;
  16.     font-size: 16px;
  17. }
  18.  
  19. .no-login-title .btn-login {
  20.     color: darkorange;
  21. }
  22.  
  23. /* 用户背景 */
  24. .user-info {
  25.     width: 100%;
  26.     display: flex;
  27. }
  28.  
  29. .user-info .user-info-bg {
  30.     position: relative;
  31.     height: 34vh;
  32. }
  33.  
  34. .user-info .user-info-bg .user-info-wrap {
  35.     position: relative;
  36.     top: 30%;
  37.     text-align: center;
  38.     margin-left: 120px;
  39. }
  40.  
  41. .user-info .user-info-bg .user-info-wrap image {
  42.     width: 150rpx;
  43.     height: 150rpx;
  44.     border-radius: 50%;
  45.     margin-top: -70rpx;
  46. }
  47.  
  48. .user-info .user-info-bg .user-info-wrap .user-nickname {
  49.     color: red;
  50.     font-weight: 600;
  51.     font-size: 36rpx;
  52. }
  53.  
  54. /* 用户菜单样式 */
  55. .usermenu {
  56.     margin-top: 11rpx;
  57. }
  58.  
  59. .usermenu .address {
  60.     margin: 15rpx;
  61.     background-color: white;
  62.     padding-left: 35rpx;
  63.     padding: 20rpx;
  64. }
  65.  
  66. .usermenu .infocontact {
  67.     background-color: white;
  68.     margin: 15rpx;
  69.     padding-left: 35rpx;
  70.     padding: 20rpx;
  71. }
  72.  
  73. .usermenu .infocontact .inforight {
  74.     float: right;
  75. }

  1. js

  1. // pages/personal/personal.js
  2. Page({
  3.  
  4.     /**
  5.      * 页面的初始数据
  6.      */
  7.     data: {
  8.         isLogined: false,//登录标志，默认未登录
  9.         userInfo: {},//用户信息
  10.     },
  11.     //收货地址
  12.     handleaddress() {
  13.         wx.chooseAddress({
  14.             success: (result) => {
  15.  
  16.             }
  17.         });
  18.     },
  19.     //联系我们
  20.     contactus() {
  21.         wx.navigateTo({
  22.             url: '/pages/we/we',
  23.         })
  24.     },
  25.     /**
  26.      * 生命周期函数--监听页面加载
  27.      */
  28.     onLoad(options) {
  29.  
  30.     },
  31.  
  32.     /**
  33.      * 生命周期函数--监听页面初次渲染完成
  34.      */
  35.     onReady() {
  36.  
  37.     },
  38.  
  39.     /**
  40.      * 生命周期函数--监听页面显示
  41.      */
  42.     onShow() {
  43.  
  44.     },
  45.  
  46.     /**
  47.      * 生命周期函数--监听页面隐藏
  48.      */
  49.     onHide() {
  50.  
  51.     },
  52.  
  53.     /**
  54.      * 生命周期函数--监听页面卸载
  55.      */
  56.     onUnload() {
  57.  
  58.     },
  59.  
  60.     /**
  61.      * 页面相关事件处理函数--监听用户下拉动作
  62.      */
  63.     onPullDownRefresh() {
  64.  
  65.     },
  66.  
  67.     /**
  68.      * 页面上拉触底事件的处理函数
  69.      */
  70.     onReachBottom() {
  71.  
  72.     },
  73.  
  74.     /**
  75.      * 用户点击右上角分享
  76.      */
  77.     onShareAppMessage() {
  78.  
  79.     }
  80. })

  1. 效果

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

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

  

闽ICP备14008679号