评论

微信小程序Flex盒子布局实战----校园卡个人主页实现

Flex布局。校园卡及其他个人主页前端实现及逻辑思路。

先上图。简陋但不失内容,咳咳。

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;
}


页面下面的两个图标用的是vant-weapp 链接 https://github.com/youzan/vant-weapp

关于Flex布局的详细介绍: 链接 https://www.cnblogs.com/jianxian/p/11124585.html

最后一次编辑于  03-09  
点赞 2
收藏
评论

1 个评论

  • 何仙姑
    何仙姑
    03-10

    最近在学习flex布局,不是一片有营养的文章。点赞

    03-10
    赞同
    回复 3
    • 长风破浪会有时
      长风破浪会有时
      03-10
      不是一片有营养的文章,您还点赞,让我怪不好意思的>_<
      03-10
      回复
    • 何仙姑
      何仙姑
      03-10
      漏了一个字,意思截然反了,不愧是😄
      03-10
      回复
    • daaaa
      daaaa
      03-15
      不是有营养的文章,就代表都是干货,哈哈
      03-15
      回复
登录 后发表内容