Introducción al diseño flexible
La solución tradicional del diseño, basada en el modelo de caja, se basa en el atributo de visualización + atributo de posición + atributo flotante
¿Qué es el diseño flexible?
Flex es la abreviatura de Flexible Box, que significa "diseño elástico", que se utiliza para proporcionar la máxima flexibilidad al modelo de caja.
Cualquier contenedor se puede especificar como un diseño flexible.
pantalla: 'flex'
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 denomina inicio principal y la posición final se denomina final principal; la posición inicial del eje transversal se denomina inicio transversal y la posición final se denomina final transversal.
Los elementos se organizan a lo largo del eje principal de forma predeterminada. El espacio del eje principal ocupado por un solo elemento se denomina tamaño principal, y el espacio del eje transversal ocupado por un solo elemento se denomina tamaño transversal.
propiedad flexible
dirección de flexión
La dirección del eje principal por defecto es fila
flex-wrap Cómo envolver una línea si una línea de eje no encaja
flex-flow es una abreviatura de las propiedades flex-direction y flex-wrap
justificar-contenido
Define la alineación de los elementos en el eje principal
alinear elementos
Define cómo se alinean los elementos en el eje transversal
El atributo align-content define la alineación de múltiples ejes
Tenga en cuenta que después de configurar el diseño flexible, las propiedades flotantes, claras y de alineación vertical de los elementos secundarios no serán válidas.
Dirección de aprendizaje:
http://www.runoob.com/w3cnote/flex-grammar.html
Conferencia Proyecto OA-Inicio
Prefacio
Los applets no tienen objetos DOM, todo se basa en la creación de componentes.
reservar conocimiento
Comprender el mecanismo del evento
Comprender la creación de componentes
Comprender el enlace de datos
Diseño flexible
Solución de Adaptación Móvil
Consejos reflexivos
Es más fácil desarrollar pequeños programas después de aprender Vue
Objetivo
configuración
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', //会议信息
};Por supuesto
aplicación.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": "设置"
}]
herramienta simulada
datos de imagen 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"
}
}El simulacro que viene con las herramientas de desarrollo de WeChat para los datos virtuales predeterminados
página
índice.css
page{
height: 100%;
background-color: #efeff4;
}golpe fuerte
índice.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>índice.css
.swiper-item {
height: 300rpx;
width: 100%;
border-radius: 10rpx;
}índice.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
})
}
})
}
Llame al método de carga de datos en la función de carga de página
información de la reunión
datos simulados
{
"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"
}
}índice.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>índice.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;
}