1. Diseño flexible
La solución tradicional para el diseño, basada en [modelo de caja] , se basa en el atributo de visualización + atributo de posición + atributo flotante
1. ¿Qué es el diseño flexible?
- Flex es la abreviatura de Flexible Box , que significa " diseño flexible " y se utiliza para proporcionar la máxima flexibilidad a los modelos con forma de caja.
- Cualquier contenedor puede designarse como diseño Flex.
- pantalla: 'flexible'
El contenedor tiene dos ejes por defecto: el eje principal horizontal y el eje transversal vertical .
- La posición inicial del eje principal (la intersección con el borde) se llama inicio principal y la posición final se llama extremo principal;
- La posición inicial del eje transversal se llama inicio transversal y la posición final se llama extremo transversal.
Los elementos están organizados a lo largo del eje principal de forma predeterminada. El espacio del eje principal ocupado por un solo elemento se llama tamaño principal, y el espacio del eje transversal ocupado por un solo elemento se llama tamaño transversal.
2. atributo flexible
| Atributos | efecto |
|---|---|
| dirección flexible | La dirección del eje principal por defecto es fila. |
| envoltura flexible | Si no se puede organizar una línea de eje, ¿cómo ajustar la línea? |
| flujo flexible | Es la abreviatura de propiedad de dirección flexible y propiedad de envoltura flexible. |
| justificar-contenido | Define la alineación del elemento en el eje principal. |
| alinear elementos | Definir cómo se alinean los elementos en el eje transversal |
| alinear contenido | Las propiedades definen la alineación de múltiples ejes. |
[Nota] Después de configurar el diseño Flex, los atributos flotante, claro y de alineación vertical de los elementos secundarios no serán válidos.
flex-directionDefine la disposición de los elementos secundarios en el eje principal (a lo largo del eje principal del contenedor). Incluye los siguientes valores:
row(Predeterminado): los elementos secundarios se organizan de izquierda a derecha en el eje principal.row-reverse: Los elementos secundarios se organizan de derecha a izquierda en el eje principal.column: Los elementos secundarios se organizan de arriba a abajo en el eje principal.column-reverse: Los elementos secundarios se organizan de abajo hacia arriba en el eje principal.
flex-wrapDefine cómo se ajustan los elementos secundarios cuando el ancho del contenedor es insuficiente. Incluye los siguientes valores:
nowrap(Valor predeterminado): los elementos secundarios no se ajustan y las partes que excedan el ancho del contenedor se comprimen.wrap: Los elementos secundarios se ajustan por línea y los elementos secundarios que exceden el ancho del contenedor se moverán a la siguiente línea.wrap-reverse: Los elementos secundarios se ajustan en filas inversas y los elementos secundarios que exceden el ancho del contenedor se organizarán a partir de la siguiente línea.
flex-flowEs la abreviatura deflex-directiony dos atributos.flex-wrapContiene dos valores, separados por espacios:
flex-directionvalor (el valor predeterminado esrow).flex-wrapvalor (el valor predeterminado esnowrap).
justify-contentDefine la alineación de los elementos secundarios en el eje principal. Incluye los siguientes valores:
flex-start(Predeterminado): los elementos secundarios se organizan contra el borde inicial del contenedor.flex-end: Los elementos secundarios están dispuestos cerca del final del contenedor.center: Los elementos secundarios están centrados en el eje principal del contenedor.space-between: Los elementos secundarios se distribuyen uniformemente en el contenedor, con el primer elemento secundario en el borde inicial y el último elemento secundario en el último borde.space-around: Los elementos secundarios se distribuyen uniformemente en el contenedor, con espacios en blanco entre los elementos secundarios.
align-itemsDefine la alineación de los elementos secundarios en el eje transversal (el eje perpendicular al eje principal). Incluye los siguientes valores:
stretch(Predeterminado): los elementos secundarios se estiran para llenar el eje transversal.flex-start: Los elementos secundarios están alineados en el borde inicial del eje transversal.flex-end: Los elementos secundarios están alineados en el último borde del eje transversal.center: Los elementos secundarios están centrados en el eje transversal del contenedor.baseline: Los elementos secundarios se alinean según su línea base.
align-contentDefine la alineación de varias filas de elementos secundarios en el eje transversal. Solo surte efecto cuando hay varias filas de elementos secundarios, incluidos los siguientes valores:
stretch(Predeterminado): varias filas de elementos secundarios se extienden para llenar el eje transversal.flex-start:Varias filas de subelementos están alineadas en el borde inicial del eje transversal.flex-end: Varias filas de subelementos están alineadas en el borde final del eje transversal.center:Varias filas de elementos secundarios están centradas en el eje transversal del contenedor.space-between: Varias filas de subelementos se distribuyen uniformemente en el contenedor, con la primera fila en el borde inicial y la última fila en el último borde.space-around: Varias filas de elementos secundarios se distribuyen uniformemente en el contenedor, con espacios en blanco entre cada fila.
Debe probar más ejemplos usted mismo . Para obtener más detalles, puede ver la configuración del subprograma AIP del sitio web oficial | Documentación abierta de WeChat , o ver el tutorial de sintaxis de diseño Flex | Tutorial para novatos (runoob.com)
2. Casos integrales
1 、 deslizar
1.1 Atributos comunes
| Atributos | tipo | valor por defecto | Requerido | ilustrar | Versión mínima | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| puntos indicadores | booleano | FALSO | No | Ya sea para mostrar los puntos indicadores del panel | 1.0.0 | |||||||||||||
| color del indicador | color | rgba(0, 0, 0, .3) | No | Color del puntero | 1.1.0 | |||||||||||||
| indicador-activo-color | color | #000000 | No | El color del punto indicador actualmente seleccionado. | 1.1.0 | |||||||||||||
| auto-reproducción | booleano | FALSO | No | Si cambiar automáticamente | 1.0.0 | |||||||||||||
| actual | número | 0 | No | El índice del control deslizante actual. | 1.0.0 | |||||||||||||
| intervalo | número | 5000 | No | Intervalo de tiempo de conmutación automática | 1.0.0 | |||||||||||||
| duración | número | 500 | No | Duración de la animación de diapositivas | 1.0.0 | |||||||||||||
| circular | booleano | FALSO | No | Ya sea para usar conexión deslizante | 1.0.0 | |||||||||||||
| vertical | booleano | FALSO | No | Si la dirección de deslizamiento es vertical | 1.0.0 | |||||||||||||
| mostrar-varios-elementos | número | 1 | No | Número de controles deslizantes mostrados simultáneamente | 1.9.0 | |||||||||||||
| función de relajación | cadena | "por defecto" | No | Especifique el deslizador para cambiar el tipo de animación de relajación | 2.6.5 | |||||||||||||
|
||||||||||||||||||
| cambio de enlace | identificador de eventos | No | El evento de cambio se activará cuando haya cambios actuales, event.detail = {current, source} | 1.0.0 | ||||||||||||||
| transición de enlace | identificador de eventos | No | Cuando cambie la posición del elemento swiper, se activará el evento de transición, event.detail = {dx: dx, dy: dy}. Skyline solo admite métodos de componentes que no son worklet como devoluciones de llamada. | 2.4.3 | ||||||||||||||
| enlazaranimaciónfinalizar | identificador de eventos | No | El evento Animationfinish se activará cuando finalice la animación. Event.detail es el mismo que el anterior. Skyline solo admite métodos de componentes que no son worklet como devoluciones de llamada. | 1.9.0 | ||||||||||||||
2. Menú inferior de inicio
Después de crear un nuevo proyecto de miniprograma, cree una nueva página y vincule tabBer en páginas en app.json .
aplicación.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"
}Efecto
3. Construcción del contenido de la página de inicio.
3.1 Crear una interfaz de back-end
Cree un archivo config/api.js en su proyecto ,
// 以下是业务服务器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 crea datos
No estamos conectados al fondo para el nivel de líquido, por lo que podemos usar el Mock en el subprograma para simular algunos datos falsos.
Utilice nuestros datos falsos para ponerlos 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" } }
Escribimos pruebas de métodos en la página de inicio.
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 }) } })código crítico
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(); } })
[Nota] Recuerde abrir esto en esta ubicación
Después de compilar, verifique los datos impresos en el compilador.
3.3 Crear gráfico de carrusel
Ya hemos establecido los datos del nivel de líquido anteriormente, por lo que escribimos aquí una página de gráfico de carrusel.
<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 Caso: construcción del contenido de la página de inicio
Usamos un caso de conferencia para proporcionar un ejemplo de contenido.
Según los pasos anteriores, cree un método llamado por la página de inicio .
//首页内容 loadMeetingInfos() { let that = this; wx.request({ url: api.MettingInfos, dataType: 'json', success(res) { console.log(res) that.setData({ lists: res.data.lists }) } }) }Utilice Mack para simular datos
paquete de datos 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" } }disposición
<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; }
