微信小程序校园个人主页显示前端---flex布局
2023-06-13 09:16:58 时间
先上图。简陋但不失内容,咳咳。
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
相关文章
- 微信小程序一个js文件读取多个接口数据「建议收藏」
- 微信小程序不在以下 request 合法域名列表中「建议收藏」
- 【愚公系列】2022年09月 微信小程序-Page页面扩展
- 微信小程序轮播图片自适应[通俗易懂]
- 微信公众号开发——2、微信网页开发
- 微信小程序服务器端登录注册验证「建议收藏」
- 基于微信小程序云开(统计学生信息并导出excel)2.0版
- 两万字:讲述微信小程序之组件
- 【说站】万圣节头像挂件在线生成微信小程序前端源码
- 【说站】流量主系列|独立版在线答题微信小程序源码
- 【愚公系列】2022年09月 微信小程序-小程序登录面板功能实现
- 模仿Android微信小程序,实现小程序独立任务视图的效果
- 【愚公系列】2022年10月 微信小程序-优购电商项目-自定义组件
- 什么是大前端技术?微信小程序用户占比达25%
- 《吐血整理》高级系列教程-吃透Fiddler抓包教程(35)-Fiddler如何抓取微信小程序的包-下篇
- 微信小程序异步转同步如何实现?(亲测可行)
- java版+支付宝支付和微信支付(一)详解编程语言
- 郑州遭遇特大暴雨 微信添加“等天晴”新状态
- MySQL构建微信小程序:简单易学,有趣无限(mysql微信小程序)
- 120个程序源码–微信小程序
- PHP限制页面只能在微信自带浏览器访问的代码