微信小程序校园个人主页显示前端---flex布局

最新推荐文章于 2024-05-09 09:19:22 发布

潜心专研的小张同学

最新推荐文章于 2024-05-09 09:19:22 发布

阅读量281

点赞数

分类专栏：微信小程序文章标签：前端微信小程序 css

本文链接：https://blog.csdn.net/this_zq/article/details/124607573

版权

微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文展示了如何在微信小程序中处理用户信息显示。当未获取用户信息时，显示包含姓名、学院、班级和学号的详细信息；已获取信息则展示简洁界面。使用了 vant-weapp UI 库提供的图标，并介绍了 Flex 布局在页面设计中的应用，以实现响应式和美化效果。

摘要由CSDN通过智能技术生成

先上图。简陋但不失内容，咳咳。
在这里插入图片描述
wxml

<!--pages/xiaoyuanka/home/home.wxml-->
<!-- 未获取用户信息状态 -->
<view wx:if="{{!loginOK}}" class="first">
  <view class="first_1_">123</view>
  <view class="first_2_">
    <view class="name">
    <text>张同学</text>
    </view>
    <view class="first_2_1">
    <text style="font-weight: bold;">学院：</text><text>计算机科学与技术学院</text>
    </view>
    <view class="first_2_1">
    <text style="font-weight: bold;">班级：</text><text>1607</text>
    </view>
    <view class="first_2_1">
    <text style="font-weight: bold;">学号:</text><text>2115280026</text>
    </view>
  </view>
</view>
<!-- /未获取用户信息状态 -->

<!-- 已获取用户信息状态 -->
<view wx:if="{{loginOK}}" class="first_1">
  <view>
    
  </view>
</view>
<!-- /已获取用户信息状态 -->

<demo-block title="功能" class="second">
  <van-cell title="金额查询" icon="user-circle-o" is-link  bindtap="goto1" />
  <van-cell title="消费历史查询" icon="comment-o" is-link  bindtap="goto2" />
</demo-block>

wxss

/* pages/xiaoyuanka/home/home.wxss */
.first{
  display: flex; /*flex布局*/
  flex-direction: row;  /*容器内项目按主轴方向排列，横着拍*/
  justify-content:space-around; /* 行内项目均匀排列，靠两边的缝隙空间相加 为中间项目排列的缝隙*/
  align-content:space-around; /*当大于一行时 每行项目排列方式同上*/
  align-items:center ;/*首先想象这个容器的高度，容器内所有的项目位于这个容器高度的中间，多行则按多行的方式排列，就是align-content*/
  width: 100%;
  height: 400rpx;
  background: #d7f0db
}
.first_1_{
  height: 300rpx;
  width: 250rpx;
  background: #C4723C
}
.first_2_{
  height: 380rpx;
  width: 380rpx;
  background: #66AA55;
  display: flex; /*flex嵌套布局*/
  flex-direction: column;
  justify-content:space-around;
  
}

.first_2_1{
  height: 80rpx;
  width: 100%;
  /* border: 2rpx solid black; */
  line-height: 40rpx; 
}

.name{
  height: 80rpx;
  width: 100%;
  /* border: 2rpx solid black; */
  line-height: -40rpx; /*行间距*/
  letter-spacing:20rpx;/*字符间距*/
  font-size: 60rpx;
  color: #C4723C;
  text-align: center;
}