微信小程序（第十五章）- 我的页面的实现

登录页面

实现效果

通过效果图，有两个登录页面。一个未登录效果、一个登录效果。学生打卡器最终的呈现效果，如果点击tabBar里面的我的，如果没有登录则跳转到登录页面。

页面结构实现

1. 定义1个view，给其定义id：userInfoView；
2. 在userInfoView里定义2个子view，分别承载昵称和来自；

代码如下：

<!--用户信息展示区域-->
<view id="userInfoView">
    <view>昵称：史博今white_hacker</view>
    <view>来自：北京·海淀</view>
</view>

页面样式实现

1. 给userInfoView设置背景颜色、上下内边距、文本居中；
   padding不同数目值的表示

   •   上下左右的内边距
     

   • • 上下、左右
   • • • 上、左右、下
   • • • • 上、右、下、左
           注：给父元素的内容设置，也针对子元素
2. 给两个view文本设置字体大小和颜色；
3. 给第二个view设置上下外边距或内边距；

代码如下：

/*用户信息展示样式*/
#userInfoView{
    background: #87cefa;
    padding:30rpx 0 40rpx;
    text-align: center;
}
#userInfoView > view:nth-child(1){
    color: #fff;
    font-size:34rpx;
}
#userInfoView > view:nth-child(2){
    color: #fff;
    font-size:30rpx;
    padding:30rpx 0;
}

个人中心列表项的实现

页面结构实现

1. 定义一个view,给其添加class：userItemListView;
2. 在userItemListView里面定义对应数目的子view；
3. 每个子view里面定义对应的文本和箭头；

代码如下：

<!--用户列表选项-->
<view class="userItemListView">
    <view>
        <text>补充个人信息</text>
        <view class="arrow"></view>
    </view>
    <view>
        <text>绑定手机号</text>
        <view class="arrow"></view>
    </view>
    <view>
        <text>绑定微信</text>
        <view class="arrow"></view>
    </view>
    <view>
        <text>修改/添加密码</text>
        <view class="arrow"></view>
    </view>
</view>
<view class="userItemListView">
    <view>
        <text>关于我们</text>
        <view class="arrow"></view>
    </view>
    <view>
        <text>退出登录</text>
        <view class="arrow"></view>
    </view>
    <view>
        <text>注销账号</text>
        <view class="arrow"></view>
    </view>
</view>

页面样式实现

1. 给页面设置整体的背景色；
2. 给userItemListView设置背景色、左右内边距、上下外边距；
3. 给userItemListView里面的子view设置高度、行高、下边框；
4. 给文字设置大小粗细；
5. 设置箭头样式；
   注：垂直外边距的合并；当两个外边距垂直堆叠时，外边距取其较大值；

代码如下：

/*用户列表选项样式*/
.userItemListView{
    background:#fff;
    padding:0 50rpx;
    margin:24rpx 0;
}
.userItemListView > view{
    height:88rpx;
    line-height: 88rpx;
    border-bottom: 1rpx solid #f1f1f1;
    position:relative;
}
.userItemListView > view:last-child{
    border:none;
}
.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;
}