Introduction to Flex Layout
The traditional solution of the layout, based on the box model, relies on the display attribute + position attribute + float attribute
What is flex layout?
Flex is the abbreviation of Flexible Box, which means "elastic layout", which is used to provide maximum flexibility for the box model.
Any container can be specified as a flex layout.
display: ‘flex’
The container has two axes by default: the horizontal main axis and the vertical cross axis. The starting position of the main axis (the intersection with the border) is called main start, and the ending position is called main end; the starting position of the cross axis is called cross start, and the ending position is called cross end.
Items are arranged along the main axis by default. The main axis space occupied by a single item is called main size, and the cross axis space occupied by a single item is called cross size.
flex property
flex-direction
The direction of the main axis defaults to row
flex-wrap How to wrap a line if an axis line does not fit
flex-flow is a shorthand for the flex-direction and flex-wrap properties
justify-content
Defines the alignment of items on the main axis
align-items
Defines how items are aligned on the cross axis
The align-content attribute defines the alignment of multiple axes
Note that after the flex layout is set, the float, clear and vertical-align properties of the child elements will be invalid.
Study address:
http://www.runoob.com/w3cnote/flex-grammar.html
Conference OA Project-Home
Foreword
Applets do not have DOM objects, everything is based on componentization
reserve knowledge
Understand the event mechanism
Understand componentization
Understand data binding
Flex layout
Mobile Adaptation Solution
Thoughtful Tips
It is easier to develop small programs after learning Vue
Target
configuration
config/api.js
// 以下是业务服务器API地址
// 本机开发API地址
var WxApiRoot = 'http://localhost:8080/demo/wx/';
// 测试环境部署api地址
// var WxApiRoot = 'http://192.168.0.101:8070/demo/wx/';
// 线上平台api地址
//var WxApiRoot = 'https://www.oa-mini.com/demo/wx/';
module.exports = {
IndexUrl: WxApiRoot + 'home/index', //首页数据接口
SwiperImgs: WxApiRoot+'swiperImgs', //轮播图
MettingInfos: WxApiRoot+'meeting/list', //会议信息
};sure
app.json
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/static/tabBar/coding.png",
"selectedIconPath": "/static/tabBar/coding-active.png"
},
{
"pagePath": "pages/meeting/list/list",
"iconPath": "/static/tabBar/sdk.png",
"selectedIconPath": "/static/tabBar/sdk-active.png",
"text": "会议"
},
{
"pagePath": "pages/vote/list/list",
"iconPath": "/static/tabBar/template.png",
"selectedIconPath": "/static/tabBar/template-active.png",
"text": "投票"
},
{
"pagePath": "pages/ucenter/index/index",
"iconPath": "/static/tabBar/component.png",
"selectedIconPath": "/static/tabBar/component-active.png",
"text": "设置"
}]
mock tool
imageSrcs image data
{
"data": {
"images":[
{
"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png",
"text": "1"
},
{
"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner2.png",
"text": "2"
},
{
"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner3.png",
"text": "3"
},
{
"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner4.png",
"text": "4"
},
{
"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner5.png",
"text": "5"
},
{
"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner6.png",
"text": "6"
}
]
},
"statusCode": "200",
"header": {
"content-type":"applicaiton/json;charset=utf-8"
}
}The Mock that comes with the WeChat developer tools to default virtual data
page
index.css
page{
height: 100%;
background-color: #efeff4;
}swipe
index.wxml
<view>
<swiper autoplay="true" indicator-dots="true" indicator-color="#fff" indicator-active-color="#00f">
<block wx:for="{
{imgSrcs}}" wx:key="text">
<swiper-item>
<view>
<image src="{
{item.img}}" class="swiper-item" />
</view>
</swiper-item>
</block>
</swiper>
</view>index.css
.swiper-item {
height: 300rpx;
width: 100%;
border-radius: 10rpx;
}index.js
const api = require("../../config/api")
loadSwiperImgs(){
let that=this;
wx.request({
url: api.SwiperImgs,
dataType: 'json',
success(res) {
console.log(res)
that.setData({
imgSrcs:res.data.images
})
}
})
}
Call the load data method in the page load function
meeting information
mock data
{
"data": {
"lists": [
{
"id": "1",
"image": "/static/persons/1.jpg",
"title": "对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】",
"num":"304",
"state":"进行中",
"starttime": "2022-03-13 00:00:00",
"location": "深圳市·南山区"
},
{
"id": "1",
"image": "/static/persons/2.jpg",
"title": "AI WORLD 2016世界人工智能大会",
"num":"380",
"state":"已结束",
"starttime": "2022-03-15 00:00:00",
"location": "北京市·朝阳区"
},
{
"id": "1",
"image": "/static/persons/3.jpg",
"title": "H100太空商业大会",
"num":"500",
"state":"进行中",
"starttime": "2022-03-13 00:00:00",
"location": "大连市"
},
{
"id": "1",
"image": "/static/persons/4.jpg",
"title": "报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”",
"num":"150",
"state":"已结束",
"starttime": "2022-03-13 00:00:00",
"location": "北京市·朝阳区"
},
{
"id": "1",
"image": "/static/persons/5.jpg",
"title": "新质生活 · 品质时代 2016消费升级创新大会",
"num":"217",
"state":"进行中",
"starttime": "2022-03-13 00:00:00",
"location": "北京市·朝阳区"
}
]
},
"statusCode": "200",
"header": {
"content-type":"applicaiton/json;charset=utf-8"
}
}index.wxml
<view class="mobi-title">
<text class="mobi-icon"></text>
<text>会议信息</text>
</view>
<block wx:for-items="{
{lists}}" wx:for-item="item" wx:key="item.id">
<view class="list" data-id="{
{item.id}}">
<view class="list-img">
<image class="video-img" mode="scaleToFill" src="{
{item.image}}"></image>
</view>
<view class="list-detail">
<view class="list-title"><text>{
{item.title}}</text></view>
<view class="list-tag">
<view class="state">{
{item.state}}</view>
<view class="join"><text class="list-num">{
{item.num}}</text>人报名</view>
</view>
<view class="list-info"><text>{
{item.location}}</text>|<text>{
{item.starttime}}</text></view>
</view>
</view>
</block>
<view class="section bottom-line">
<text>到底啦</text>
</view>index.js
loadMeetingInfos(){
let that=this;
wx.request({
url: api.MettingInfos,
dataType: 'json',
success(res) {
console.log(res)
that.setData({
lists:res.data.lists
})
}
})
}index.wxss
page{
height: 100%;
background-color: #efeff4;
}
.swiper-item{
height: 300rpx;
width: 100%;
border-radius: 10rpx;
}
.mobi-title{
display: flex;
align-items: center;
}
.mobi-icon{
display:inline-block;
width: 2px;
height: 20px;
margin: 2px 6px;
background-color: red;
}
.mobi-title text{
font-weight: 800;
color: #4e4949;
}
.list{
display: flex;
flex-direction: row;
border-top: 1px solid #eeeeee;
width: 100%;
height: 120px;
align-items: center;
margin-top: 10rpx;
background-color: #fff;
padding: 0 20rpx 0 0;
}
.list-img,.video-img{
width: 75px;
height: 75px;
}
.list-img{
}
.video-img{
}
.list-detail{
margin: 0 0 0 10px;
}
.list-title{
font-weight: 700;
}
.list-tag{
display: flex;
margin: 5px 0 10px 0;
align-items: center;
color: lightgray;
}
.state{
border: 1px solid lightblue;
padding: 1px 10px;
color: lightblue;
}
.join{
margin: 0 0 0 10px;
}
.list-num{
color: red;
}
.list-info{
color: lightgray;
font-size: 14px;
}
.bottom-line{
display: flex;
height: 60rpx;
justify-content: center;
align-items: center;
background-color: #f3f3f3;
}
.bottom-line text{
font-size: 9pt;
color: #666;
}