Introduction à la mise en page flexible
La solution traditionnelle de la mise en page, basée sur le modèle de boîte, repose sur l'attribut display + attribut position + attribut float
Qu'est-ce que la mise en page flexible ?
Flex est l'abréviation de Flexible Box, qui signifie "disposition élastique", qui est utilisée pour offrir une flexibilité maximale au modèle de boîte.
Tout conteneur peut être spécifié en tant que mise en page flexible.
affichage : 'flex'
Le conteneur a deux axes par défaut : l'axe principal horizontal et l'axe transversal vertical. La position de départ de l'axe principal (l'intersection avec la bordure) est appelée départ principal et la position de fin est appelée extrémité principale ; la position de départ de l'axe transversal est appelée départ croisé et la position de fin est appelée extrémité croisée.
Les éléments sont disposés le long de l'axe principal par défaut. L'espace de l'axe principal occupé par un seul élément est appelé taille principale et l'espace de l'axe transversal occupé par un seul élément est appelé taille croisée.
propriété flexible
flex-direction
La direction de l'axe principal par défaut est la ligne
flex-wrap Comment envelopper une ligne si une ligne d'axe ne rentre pas
flex-flow est un raccourci pour les propriétés flex-direction et flex-wrap
justifier-contenu
Définit l'alignement des éléments sur l'axe principal
aligner les éléments
Définit comment les éléments sont alignés sur l'axe transversal
L'attribut align-content définit l'alignement de plusieurs axes
Notez qu'une fois la mise en page flexible définie, les propriétés float, clear et vertical-align des éléments enfants seront invalides.
Adresse d'apprentissage :
http://www.runoob.com/w3cnote/flex-grammar.html
Conférence OA Project-Accueil
Avant-propos
Les applets n'ont pas d'objets DOM, tout est basé sur la composition
savoir réserver
Comprendre le mécanisme des événements
Comprendre la composition
Comprendre la liaison de données
Disposition flexible
Solution d'adaptation mobile
Conseils judicieux
Il est plus facile de développer de petits programmes après avoir appris Vue
Cible
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', //会议信息
};Bien sur
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": "设置"
}]
outil factice
données d'image imageSrcs
{
"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"
}
}Le Mock fourni avec les outils de développement WeChat pour les données virtuelles par défaut
page
index.css
page{
height: 100%;
background-color: #efeff4;
}glisser
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
})
}
})
}
Appelez la méthode de chargement des données dans la fonction de chargement de la page
informations sur la réunion
fausses données
{
"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;
}