斑马斑马-11-微信小程序-布局谋篇
一、flex布局
1、Flex 布局是什么？
Flex是Flexible Box的缩写，意味着：灵活布局、弹性布局。
任何一个容器均可指定为Flex布局。display:flex;
行内元素也可以使用Flex布局。display:inline-flex;
采用Flex布局的元素，称为Flex容器，简称容器。
它的所有子元素自动成为容器成员，称为Flex项目，简称项目。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
2、效果展示
class="menu"> class="item"> "/static/hade/1.jpg"> 长颈鹿 class="item"> "/static/hade/2.jpg"> 大象 class="item"> "/static/hade/3.jpg"> 烏龜 class="item"> "/static/hade/4.jpg"> 佩奇 class="item"> "/static/hade/5.jpg"> 小白兔
/* pages/firends.wxss */ image { width: 100rpx; height: 100rpx; } .menu { display: flex; /* 规定主轴方向 row：水平；*/ flex-direction: row; /* 规定元素在主軸方向展示方式 */ justify-content: space-around; /* 在副轴方向如何展示 */ /* align-items: flex-end; */ } .menu .item { display: flex; /* 规定主轴方向 column：垂直；*/ flex-direction: column; align-items: center; }
3、总结
二、flex练习
1、tabbar设置
1.1 添加图片文件夹（存放tabbar图片）
1.2 添加4个page页面，分别是（首页：index，消息：message，购物：cart，用户：myInfo）
1.3 app.json
检查pages项：主要是查看添加的page页是否添加管理到Pages下，
配置tabBar项：selectedColor:设置选中后的文本颜色，list项设置每一个模块的配置，
修改window项：设置标题
{ "pages": [ "pages/index/index", "pages/message/message", "pages/shopping/shopping", "pages/myInfo/myInfo", "pages/logs/logs" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "逃宝", "navigationBarTextStyle": "black" }, "tabBar": { "selectedColor": "#FFCC33", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "/static/tabbar/shouye.png", "selectedIconPath": "/static/tabbar/shouyefill.png" }, { "pagePath": "pages/message/message", "text": "消息", "iconPath": "/static/tabbar/xinxi.png", "selectedIconPath": "/static/tabbar/xinxifill.png" }, { "pagePath": "pages/shopping/shopping", "text": "购物", "iconPath": "/static/tabbar/cart.png", "selectedIconPath": "/static/tabbar/cart_hover.png" }, { "pagePath": "pages/myInfo/myInfo", "text": "用户", "iconPath": "/static/tabbar/yonghu.png", "selectedIconPath": "/static/tabbar/yonghufill.png" } ] }, "style": "v2", "sitemapLocation": "sitemap.json" }
2、首页设置
前台页面的设置：主要用于设置元素
class="header"> class="icon"> "/static/index/icon_01.png"> 奇思妙想 class="icon"> "/static/index/icon_03.png"> 合作共赢 class="icon"> "/static/index/icon_05.png"> 集思广益 class="icon"> "/static/index/icon_07.png"> 云上生活 class="content"> class="guobao"> class="guobaoDet"> class="guobaoPic"> "/static/index/1.jpg"> class="guobaoOwner"> class="OwnerName"> "/static/index/owner.png"> 盖聂 class="OwnerFans"> "/static/index/fans.png"> 100万 class="guobaoFrom"> 秦时明月 class="guobaoDet"> class="guobaoPic"> "/static/index/2.jpg"> class="guobaoOwner"> class="OwnerName"> "/static/index/owner.png"> 乔峰 class="OwnerFans"> "/static/index/fans.png"> 99万 class="guobaoFrom"> 秦时明月 class="guobao"> class="guobaoDet"> class="guobaoPic"> "/static/index/3.jpg"> class="guobaoOwner"> class="OwnerName"> "/static/index/owner.png"> 李慕白 class="OwnerFans"> "/static/index/fans.png"> 10万 class="guobaoFrom"> 卧虎藏龙 class="guobaoDet"> class="guobaoPic"> "/static/index/4.jpg"> class="guobaoOwner"> class="OwnerName"> "/static/index/owner.png"> 俞秀莲 class="OwnerFans"> "/static/index/fans.png"> 9万 class="guobaoFrom"> 卧虎藏龙 class="guobao"> class="guobaoDet"> class="guobaoPic"> "/static/index/5.jpg"> class="guobaoOwner"> class="OwnerName"> "/static/index/owner.png"> 李白 class="OwnerFans"> "/static/index/fans.png"> 100万 class="guobaoFrom"> 唐 class="guobaoDet"> class="guobaoPic"> "/static/index/6.jpg"> class="guobaoOwner"> class="OwnerName"> "/static/index/owner.png"> 苏轼 class="OwnerFans"> "/static/index/fans.png"> 100000000万 class="guobaoFrom"> 宋 class="guobao"> class="guobaoDet"> class="guobaoPic"> "/static/index/7.jpg"> class="guobaoOwner"> class="OwnerName"> "/static/index/owner.png"> 秦始皇 class="OwnerFans"> "/static/index/fans.png"> 100万 class="guobaoFrom"> 秦 class="guobaoDet"> class="guobaoPic"> "/static/index/8.jpg"> class="guobaoOwner"> class="OwnerName"> "/static/index/owner.png"> 汉武帝 class="OwnerFans"> "/static/index/fans.png"> 99万 class="guobaoFrom"> 汉 class="guobao"> class="guobaoDet"> class="guobaoPic"> "/static/index/9.jpg"> class="guobaoOwner"> class="OwnerName"> "/static/index/owner.png"> 成吉思汗 class="OwnerFans"> "/static/index/fans.png"> 100万 class="guobaoFrom"> 元 class="guobaoDet"> class="guobaoPic"> "/static/index/10.jpg"> class="guobaoOwner"> class="OwnerName"> "/static/index/owner.png"> 孙悟空 class="OwnerFans"> "/static/index/fans.png"> 99万 class="guobaoFrom"> 斗战胜佛
前台页面的css设置，用于设置页面元素的布局
/**index.wxss**/ .header{ display: flex; flex-direction: row; justify-content: space-around; } .header .icon image { width: 100rpx; height: 100rpx; } .header .icon{ display:flex; flex-direction: column; align-items: center; } .content{ margin-top: 20rpx; display: flex; flex-direction: column; justify-content: space-around; } .content .guobao image { width: 350rpx; height: 400rpx; margin: 10rpx 10rpx 10rpx 10rpx; } .content .guobao{ display:flex; flex-direction: row; align-items: center; } .content .guobao .guobaoOwner{ display:flex; flex-direction: row; justify-content: space-between; /* 设置view相关的 */ background-color: rgba(0, 0, 0, 0.618); position:absolute; width: 350rpx; height: 80rpx; margin: -80rpx 10rpx 10rpx 10rpx; /* 设置字体相关的 */ color: white; font-size:medium; line-height:80rpx ; /*字体居中*/ } .content .guobao .guobaoOwner image{ width: 40rpx; height: 40rpx; vertical-align: middle; /*图片居中*/ }
效果展示
3、消息页设置
消息页面html的设置：主要用于设置元素
class="header"> class="headerContent"> class="item"> "/static/message/xihuan.png"> 赞和收藏 class="item"> "/static/message/friends.png"> 最近来访 class="item"> "/static/message/communication.png"> 评论和@ class="container"> class="message"> class="messagePic"> "/static/message/message.png"> class="messageContent"> class="messageTop"> 系統消息 class="msgSendTime">2020-02-02 class="messageBottom"> 中國加油！武漢加油！眾志成城，抗擊疫情 class="message"> class="messagePic"> "/static/message/message.png"> class="messageContent"> class="messageTop"> 辛弃疾 class="msgSendTime">1882-02-02 class="messageBottom"> 我见青山多妩媚，料青山见我应如是 class="message"> class="messagePic"> "/static/message/message.png"> class="messageContent"> class="messageTop"> 苏轼 class="msgSendTime">2020-02-02 class="messageBottom"> 泥上偶然留指爪,鸿飞那复计东西 class="message"> class="messagePic"> "/static/message/message.png"> class="messageContent"> class="messageTop"> zhagnsan class="msgSendTime">2020-02-02 class="messageBottom"> 你好 class="message"> class="messagePic"> "/static/message/message.png"> class="messageContent"> class="messageTop"> 李四 class="msgSendTime">2020-02-02 class="messageBottom"> hello class="message"> class="messagePic"> "/static/message/message.png"> class="messageContent"> class="messageTop"> 系統消息 class="msgSendTime">2020-02-02 class="messageBottom"> 中國加油！武漢加油！眾志成城，抗擊疫情 class="message"> class="messagePic"> "/static/message/message.png"> class="messageContent"> class="messageTop"> 系統消息 class="msgSendTime">2020-02-02 class="messageBottom"> 中國加油！武漢加油！眾志成城，抗擊疫情 class="message"> class="messagePic"> "/static/message/message.png"> class="messageContent"> class="messageTop"> 系統消息 class="msgSendTime">2020-02-02 class="messageBottom"> 中國加油！武漢加油！眾志成城，抗擊疫情 class="message"> class="messagePic"> "/static/message/message.png"> class="messageContent"> class="messageTop"> 系統消息 class="msgSendTime">2020-02-02 class="messageBottom"> 中國加油！武漢加油！眾志成城，抗擊疫情 class="message"> class="messagePic"> "/static/message/message.png"> class="messageContent"> class="messageTop"> 系統消息 class="msgSendTime">2020-02-02 class="messageBottom"> 中國加油！武漢加油！眾志成城，抗擊疫情
消息页面的css设置，用于设置页面元素的布局
/* pages/message.wxss */ .header { width: 100%; position: fixed; background-color:black; color: white; } .headerContent{ display: flex; flex-direction: row; justify-content: space-around; } .header image { width: 100rpx; height: 100rpx; } .headerContent .item{ display: flex; flex-direction: column; align-items: center; } .container{ display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-around; } .container image { width: 100rpx; height: 100rpx; } .container .message { width: 750rpx; display: flex; flex-direction: row; justify-content:start; } .messageContent .messageTop{ width: 650rpx; display: flex; flex-direction: row; justify-content: space-between; } .container .message .messageContent .msgSendTime{ margin-right: 10rpx; } .container .message .messageContent .messageBottom{ /*单行文本超出*/ width: auto; display: -webkit-box; /*设置为弹性盒子*/ -webkit-line-clamp: 1;/*最多显示1行数据*/ overflow: hidden; /*超出备份隐藏*/ text-overflow: ellipsis; /*超出显示为省略号*/ -webkit-box-orient: vertical; word-break: break-all; }
效果展示
4、购物页面
购物页面html的设置：主要用于设置元素
class="shopping"> class="title"> 甘肃博物馆 马踏飞燕 class="watch"> class="watch_status">预展中 class="watch_nums">30000次围观 class="main_pic"> "/static/shopping/mtfy.jpg"> class="detail_pic"> "/static/shopping/mtfy1.jpg"> "/static/shopping/mtfy2.jpg"> "/static/shopping/mtfy3.jpg"> "/static/shopping/mtfy4.jpg"> "/static/shopping/mtfy5.jpg"> class="shopping"> class="title"> 湖南博物馆 越王勾践剑 class="watch"> class="watch_status">预展中 class="watch_nums">30000次围观 class="main_pic"> "/static/shopping/ywgj.jpg"> class="detail_pic"> "/static/shopping/ywgj1.jpg"> "/static/shopping/ywgj2.jpg"> "/static/shopping/ywgj3.jpg"> "/static/shopping/ywgj4.jpg"> "/static/shopping/ywgj5.jpg">
购物页面的css设置，用于设置页面元素的布局
/* pages/shopping/shopping.wxss */ .shopping{ margin: 0rpx 10rpx 50rpx 10rpx; display: flex; flex-direction: column; justify-content:space-around; } .shopping .title{ font-size: 40rpx; font-weight: 800; } .shopping .watch{ display: flex; flex-direction: row; justify-content:space-between; } .shopping .watch .watch_status{ background-color: darkturquoise; margin: 10rpx 10rpx 10rpx 10rpx; border-radius: 30rpx; color: white; width: 150rpx; text-align: center; } .shopping .watch .watch_nums{ margin: 10rpx 10rpx 10rpx 10rpx; font-weight:100; font-size: 35rpx; } .shopping .main_pic image{ margin: 10rpx 10rpx 10rpx 10rpx; } .shopping .detail_pic image{ height: 200rpx; width: 200rpx; } .shopping .detail_pic{ display: flex; flex-direction: row; } .shopping .detail_pic image{ margin: 10rpx 5rpx 10rpx 5rpx; }
效果展示
5、用户页面
用户页面html的设置：主要用于设置元素
class="header"> class="top"> class="user_pic"> "/static/myinfo/user_icon.png"> 登录 | 注册 class="seeme"> 查看个人主页 class="bottom"> class="item"> 0 关注 class="item"> 1 粉丝 class="item"> 2 赞与收藏 class="item"> 3 好友动态 class="content"> class="contentList"> class="item"> "/static/myinfo/orders_icon.png"> 全部订单 class="item"> "/static/myinfo/cash_coupon_icon.png"> 待支付 class="item"> "/static/myinfo/discount_icon.png"> 待评价 class="item"> "/static/myinfo/collect_icon.png"> 收藏 class="item"> "/static/myinfo/address_icon.png"> 地址管理 class="mycontent"> class="item"> class="my_content_title">我的钱包 class="my_content_detail"> ￥200 > class="item"> class="my_content_title">我的优惠券 class="my_content_detail"> 暂无可用 > class="item"> class="my_content_title">领券中心 class="my_content_detail"> 您的福利都在这里 > class="footer"> class="item"> "/static/myinfo/wechat.png"> class="footer_item_text">微信客服 class="item"> "/static/myinfo/alipay.png"> class="footer_item_text"F>支付宝客服
用户页面的css设置，用于设置页面元素的布局
/* pages/myInfo/myInfo.wxss */ .header{ background-color: turquoise; display: flex; flex-direction: column; justify-content:space-around; color: white; margin-bottom: 20rpx; } .header .top{ display: flex; flex-direction: row; justify-content: space-between; } .header .top image{ width: 100rpx; height: 100rpx; vertical-align: middle; } .header .top .user_pic{ margin:20rpx 10rpx 20rpx 30rpx; align-items: center; justify-content: center; } .header .top .seeme{ background-color: teal; height: 80rpx; width: 300rpx; margin: 50rpx 20rpx; line-height: 80rpx; text-align: center; border-radius: 30rpx 0rpx 0rpx 30rpx ; } .header .top .user_pic text{ line-height: 150rpx; margin:0rpx 10rpx 20rpx 10rpx; align-items: center; justify-content: center; } .header .bottom{ display: flex; flex-direction: row; justify-content:space-around; margin-bottom: 50rpx; } .header .bottom .item{ display: flex; flex-direction: column; justify-content:space-around; align-items: center; } .content{ margin-top:60rpx; } .content .contentList { display: flex; flex-direction: row; justify-content: space-around; } .content .contentList .item{ display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .content .contentList .item image{ width: 80rpx; height: 80rpx; } .content .mycontent { margin-top: 100rpx; border-top:10rpx solid darkgrey; } .content .mycontent .my_content_title{ font-size: 39rpx; font-weight: 600; } .content .mycontent .item{ height: 100rpx; margin: 50rpx 30rpx 50rpx 30rpx; border-bottom:4rpx solid rgb(169, 169, 169); display: flex; flex-direction: row; justify-content: space-between; } .content .mycontent .my_content_detail{ font-size: 35rpx; font-weight: 200; } .footer { margin: 100rpx 0 100rpx 0; display: flex; flex-direction: row; justify-content: space-around; } .footer .item{ border: 4rpx solid rgb(169, 169, 169); border-radius: 20rpx; padding: 10rpx 10rpx 10rpx 10rpx; height: 50rpx; line-height: 50rpx; text-align: center; } .footer_item_text{ margin-left: 10rpx; } .footer image { height: 50rpx; width: 50rpx; vertical-align: middle; }
效果展示
至此，静态页面设置完成，相关源码：https://github.com/1692134188/HelloWechat_Flex.git
原文：https://www.cnblogs.com/YK2012/p/12818808.html