1. Disposition flexible
La solution traditionnelle pour la mise en page, basée sur [box model] , repose sur l'attribut display + l'attribut position + l'attribut float
1. Qu'est-ce que la disposition flexible ?
- Flex est l'abréviation de Flexible Box , qui signifie « disposition flexible » et est utilisée pour offrir une flexibilité maximale aux modèles en forme de boîte.
- N’importe quel conteneur peut être désigné comme une mise en page Flex.
- 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ébut principal, et la position finale est appelée fin principale ;
- La position de départ de l'axe transversal est appelée départ croisé et la position finale est appelée fin 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 transversale.
2.attribut flex
| Les attributs | effet |
|---|---|
| direction flexible | La direction de l'axe principal est par défaut en ligne |
| emballage flexible | Si une ligne d’axe ne peut pas être disposée, comment enrouler la ligne ? |
| flux flexible | Est l'abréviation de propriété flex-direction et propriété flex-wrap |
| justifier-contenu | Définit l'alignement de l'élément sur l'axe principal |
| aligner les éléments | Définir la manière dont les éléments sont alignés sur l'axe transversal |
| aligner le contenu | Les propriétés définissent l'alignement de plusieurs axes |
[Remarque] Après avoir défini la disposition Flex, les attributs float, clear et vertical-align des éléments enfants ne seront pas valides.
flex-directionDéfinit la disposition des éléments enfants sur l'axe principal (le long de l'axe principal du conteneur). Il comprend les valeurs suivantes :
row(Par défaut) : les éléments enfants sont disposés de gauche à droite sur l'axe principal.row-reverse: Les éléments enfants sont disposés de droite à gauche sur l'axe principal.column: Les éléments enfants sont disposés de haut en bas sur l'axe principal.column-reverse: Les éléments enfants sont disposés de bas en haut sur l'axe principal.
flex-wrapDéfinit comment les éléments enfants s'enroulent lorsque la largeur du conteneur est insuffisante. Il comprend les valeurs suivantes :
nowrap(Valeur par défaut) : les éléments enfants ne sont pas renvoyés à la ligne et les parties qui dépassent la largeur du conteneur seront compressées.wrap: Les éléments enfants sont renvoyés par ligne et les éléments enfants qui dépassent la largeur du conteneur seront déplacés vers la ligne suivante.wrap-reverse: Les éléments enfants sont placés dans des lignes inversées et les éléments enfants qui dépassent la largeur du conteneur seront disposés à partir de la ligne suivante.
flex-flowEst l'abréviation deflex-directionet deux attributs.flex-wrapIl contient deux valeurs, séparées par des espaces :
flex-directionvaleur (la valeur par défaut estrow).flex-wrapvaleur (la valeur par défaut estnowrap).
justify-contentDéfinit l'alignement des éléments enfants sur l'axe principal. Il comprend les valeurs suivantes :
flex-start(Par défaut) : les éléments enfants sont disposés contre le bord de départ du conteneur.flex-end: Les éléments enfants sont disposés près de la fin du conteneur.center: Les éléments enfants sont centrés sur l'axe principal du conteneur.space-between: Les éléments enfants sont répartis uniformément sur le conteneur, avec le premier élément enfant sur le bord de départ et le dernier élément enfant sur le dernier bord.space-around: Les éléments enfants sont répartis uniformément sur le conteneur, avec un espace blanc entre les éléments enfants.
align-itemsDéfinit l'alignement des éléments enfants sur l'axe transversal (l'axe perpendiculaire à l'axe principal). Il comprend les valeurs suivantes :
stretch(Par défaut) : les éléments enfants s'étirent pour remplir l'axe transversal.flex-start: Les éléments enfants sont alignés sur le bord de départ de l'axe transversal.flex-end: Les éléments enfants sont alignés sur le dernier bord de l'axe transversal.center: Les éléments enfants sont centrés sur l'axe transversal du conteneur.baseline: Les éléments enfants sont alignés en fonction de leur ligne de base.
align-contentDéfinit l'alignement de plusieurs lignes d'éléments enfants sur l'axe transversal. Cela ne prend effet que lorsqu'il existe plusieurs lignes d'éléments enfants, y compris les valeurs suivantes :
stretch(Par défaut) : plusieurs lignes d’éléments enfants s’étirent pour remplir l’axe transversal.flex-start:Plusieurs rangées de sous-éléments sont alignées sur le bord de départ de l'axe transversal.flex-end:Plusieurs rangées de sous-éléments sont alignées à l’extrémité de l’axe transversal.center:Plusieurs lignes d'éléments enfants sont centrées sur l'axe transversal du conteneur.space-between: Plusieurs lignes de sous-éléments sont réparties uniformément sur le conteneur, avec la première ligne sur le bord de départ et la dernière ligne sur le dernier bord.space-around: Plusieurs lignes d'éléments enfants sont réparties uniformément sur le conteneur, avec des espaces vides entre chaque ligne.
D'autres exemples doivent être testés par vous-même . Pour plus de détails, vous pouvez consulter le site officiel Configuration de l'applet AIP | Documentation ouverte WeChat , ou consulter le didacticiel de syntaxe de mise en page Flex | Tutoriel Rookie (runoob.com)
2. Cas complets
1. glisser
1.1. Attributs communs
| Les attributs | taper | valeur par défaut | Requis | illustrer | Version minimale | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| points indicateurs | booléen | FAUX | Non | S'il faut afficher les points indicateurs du panneau | 1.0.0 | |||||||||||||
| couleur de l'indicateur | couleur | rgba(0, 0, 0, .3) | Non | Couleur du pointeur | 1.1.0 | |||||||||||||
| indicateur-actif-couleur | couleur | #000000 | Non | La couleur du point indicateur actuellement sélectionné | 1.1.0 | |||||||||||||
| lecture automatique | booléen | FAUX | Non | S'il faut changer automatiquement | 1.0.0 | |||||||||||||
| actuel | nombre | 0 | Non | L'index du curseur actuel | 1.0.0 | |||||||||||||
| intervalle | nombre | 5000 | Non | Intervalle de temps de commutation automatique | 1.0.0 | |||||||||||||
| durée | nombre | 500 | Non | Durée de l'animation des diapositives | 1.0.0 | |||||||||||||
| circulaire | booléen | FAUX | Non | S'il faut utiliser le glissement de connexion | 1.0.0 | |||||||||||||
| verticale | booléen | FAUX | Non | Si la direction de glissement est portrait | 1.0.0 | |||||||||||||
| afficher plusieurs éléments | nombre | 1 | Non | Nombre de curseurs affichés simultanément | 1.9.0 | |||||||||||||
| fonction d'assouplissement | chaîne | "défaut" | Non | Spécifiez le curseur pour changer le type d'animation d'accélération | 2.6.5 | |||||||||||||
|
||||||||||||||||||
| changement de liaison | poignée d'événement | Non | L'événement de changement sera déclenché lorsque le courant change, event.detail = {current, source} | 1.0.0 | ||||||||||||||
| lier la transition | poignée d'événement | Non | Lorsque la position de l'élément swiper change, l'événement de transition sera déclenché, event.detail = {dx: dx, dy: dy}. Skyline ne prend en charge que les méthodes de composants non-worklet en tant que rappels. | 2.4.3 | ||||||||||||||
| liaisonanimationfinition | poignée d'événement | Non | L'événement animationfinish sera déclenché à la fin de l'animation, event.detail est le même que ci-dessus. Skyline ne prend en charge que les méthodes de composants non-worklet en tant que rappels. | 1.9.0 | ||||||||||||||
2. Menu inférieur d'accueil
Après avoir créé un nouveau projet de mini-programme, créez une nouvelle page et liez tabBer dans les pages de app.json .
app.json
{
"pages": [
"pages/index/index",
"pages/meeting/list/list",
"pages/vote/list/list",
"pages/ucenter/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle": "black"
},
"tabBar": {
"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": "设置"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}Effet
3. Construction du contenu de la page d'accueil
3.1. Créer une interface back-end
Créez un fichier config/api.js dans votre projet ,
// 以下是业务服务器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', //会议信息 };
3.2. Mock crée des données
Nous ne sommes pas connectés à l'arrière-plan du niveau de liquide, nous pouvons donc utiliser le Mock dans l'applet pour simuler de fausses données.
Utilisez nos fausses données pour les mettre en 7
{ "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" } }
Nous écrivons des tests de méthode sur la page d'accueil
index.js
// index.js // 获取应用实例 const app = getApp() const api = require("../../config/api") Page({ data: { imgSrcs:[] }, // 事件处理函数 bindViewTap() { wx.navigateTo({ url: '../logs/logs' }) }, // 轮播图的方法 loadSwiperImgs(){ let that=this; wx.request({ url: api.SwiperImgs, dataType: 'json', success(res) { console.log(res) that.setData({ imgSrcs:res.data.images }) } }) }, onLoad() { if (wx.getUserProfile) { this.setData({ canIUseGetUserProfile: true }) } // 一进来就调用轮播图的方法 this.loadSwiperImgs(); }, getUserProfile(e) { // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗 wx.getUserProfile({ desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 success: (res) => { console.log(res) this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) }, getUserInfo(e) { // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息 console.log(e) this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) } })code critique
const api = require("../../config/api") Page({ data: { imgSrcs:[] }, // 轮播图的方法 loadSwiperImgs(){ let that=this; wx.request({ url: api.SwiperImgs, dataType: 'json', success(res) { console.log(res) that.setData({ imgSrcs:res.data.images }) } }) }, onLoad() { if (wx.getUserProfile) { this.setData({ canIUseGetUserProfile: true }) } // 一进来就调用轮播图的方法 this.loadSwiperImgs(); } })
[Note] N'oubliez pas de l'ouvrir à cet endroit
Après avoir compilé, vérifiez les données imprimées dans le compilateur
3.3. Créer un graphique carrousel
Nous avons déjà établi les données de niveau de liquide auparavant, nous écrivons donc ici une page de graphique carrousel.
<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>
3.4. Cas – Construction du contenu de la page d'accueil
Nous utilisons un cas de conférence pour fournir un exemple de contenu
Sur la base des étapes précédentes, créez une méthode appelée par la page d'accueil .
//首页内容 loadMeetingInfos() { let that = this; wx.request({ url: api.MettingInfos, dataType: 'json', success(res) { console.log(res) that.setData({ lists: res.data.lists }) } }) }Utilisez Mack pour simuler des données
Paquet de données JSON
{ "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" } }mise en page
<view class="indexbg"> <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 class="mobi-title"> <text class="mobi-icon">❤</text> <text class="mobi-text">会议信息</text> </view> <block wx:for-items="{ {lists}}" wx:for-item="item" wx:key="item.id" class="bg"> <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"> <text>到底啦</text> </view> </view>index.js
// index.js // 获取应用实例 const app = getApp() const api = require("../../config/api") Page({ data: { imgSrcs: [{ "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" }], "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": "北京市·朝阳区" } ] }, // 事件处理函数 bindViewTap() { wx.navigateTo({ url: '../logs/logs' }) }, // 轮播图的方法 loadSwiperImgs() { let that = this; wx.request({ url: api.SwiperImgs, dataType: 'json', success(res) { console.log(res) that.setData({ imgSrcs: res.data.images }) } }) }, //首页会议信息的ajax loadMeetingInfos() { let that = this; wx.request({ url: api.MettingInfos, dataType: 'json', success(res) { console.log(res) that.setData({ lists: res.data.lists }) } }) }, onLoad() { if (wx.getUserProfile) { this.setData({ canIUseGetUserProfile: true }) } // 一进来就调用轮播图的方法 this.loadSwiperImgs(); }, getUserProfile(e) { // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗 wx.getUserProfile({ desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 success: (res) => { console.log(res) this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) }, getUserInfo(e) { // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息 console.log(e) this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) } })wxss
/**index.wxss**/ .userinfo { display: flex; flex-direction: column; align-items: center; color: #aaa; } .userinfo-avatar { overflow: hidden; width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; } .usermotto { margin-top: 200px; } /**index.wxss**/ .section { color: #aaa; display: flex; justify-content: center; } .list-info { color: #aaa; } .list-num { color: red; /* font-weight: 700; */ } .join { padding: 0px 0px 0px 10px; color: #aaa; } .state { margin: 0px 6px 0px 6px; border: 1px solid #4083ff; color: #4083ff; padding: 3px 5px 3px 5px; } .list-tag { padding: 3px 0px 10px 0px; display: flex; align-items: center; } .list-title { display: flex; justify-content: space-between; font-size: 11pt; color: #333; font-weight: bold; } .list-detail { display: flex; flex-direction: column; margin: 0px 0px 0px 15px; } .video-img { width: 80px; height: 80px; } .list { display: flex; flex-direction: row; background-color: seashell; border-bottom: 1px solid #cecece; padding: 10px; } .mobi-text { font-weight: 700; padding: 15px; } /* .mobi-icon { border-left: 5px solid #57f564; } */ .indexbg{ background-color: rgba(219, 219, 219, 0.678); } .mobi-title { /* background-color: rgba(219, 219, 219, 0.678); */ margin: 10px 0px 10px 0px; } .swiper-item { height: 300rpx; width: 100%; border-radius: 10rpx; } .userinfo { display: flex; flex-direction: column; align-items: center; color: #aaa; } .userinfo-avatar { overflow: hidden; width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; } .usermotto { margin-top: 200px; }
