小白开发微信小程序42--个人中心页面布局1_微信小程序个人信息页面布局代码

1、wxml

<view>
    <!-- 顶部图片 -->
    <view>
        <image class="indeximage" src="/images/person.jpg" mode="widthFix"></image>
    </view>
    <!-- 用户登录 -->
    <view>
        <block>
            <!-- 未登录 -->
            <view wx:if="{{!isLogined}}" class="no-login-title">
                <text>您尚未登录，</text>
                <text class="btn-login">点我登录</text>
            </view>
            <!-- 已登录 -->
            <view wx:else class="no-login-title">
                <button type="primary" class="btn-exit">退出登录</button>
            </view>
        </block>
    </view>
    <!-- 用户背景 -->
    <view class="user-info">
        <!-- 未登录 -->
        <view wx:if="{{!isLogined}}" class="user-info-bg">
            <view class="user-info-wrap">
                <image src="/images/nologin.jpg"></image>
                <view class="user-nickname">匿名用户</view>
            </view>
        </view>
        <!-- 已登录 -->
        <view class="user-info-bg">
            <view class="user-info-wrap">
                <image src="{{userInfo.avatarUrl}}"></image>
                <view  class="user-nickname">{{userInfo.nickName}}</view>
            </view>
        </view>
    </view>
 
    <!-- 操作信息 -->
    <view>
 
    </view>
 
</view>

2、wxss

page{
    background-color: #f6f6f6;
}
/* 顶部图片 */
.indeximage{
    width: 100%;
    height: 100%;
}
/* 登录样式 */
.no-login-title{
  text-align: center;
  font-weight: 600;
  margin: 10rpx 0;
  font-size: 16px;
}
.no-login-title .btn-login{
    color: darkorange;
}
/* 用户背景 */
.user-info{
    width: 100%;
    display: flex;
}
.user-info .user-info-bg{
    position: relative;
    height: 34vh;
}
.user-info .user-info-bg .user-info-wrap{
    position: relative;
    top:30%;
    text-align: center;
    margin-left: 120px;
}
 
.user-info .user-info-bg .user-info-wrap image{
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%; 
    margin-top: -70rpx;
}
.user-info .user-info-bg .user-info-wrap .user-nickname{
   color: red;
   font-weight: 600;
   font-size: 36rpx;
}

3、js

// pages/personal/personal.js
Page({
 
    /**
     * 页面的初始数据
     */
    data: {
        isLogined:false,//登录标志，默认未登录
        userInfo:{},//用户信息
    },
 
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
 
    },
 
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
 
    },
 
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
 
    },
 
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {
 
    },
 
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
 
    },
 
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
 
    },
 
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
 
    },
 
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {
 
    }
})

4、效果