目錄
一、Flex彈性布局
1.1 什么是Flex彈性布局
1.1.1 詳解
1.1.2 圖解?
1.1.3 代碼演示效果
1.2 Flex彈性布局的核心概念
1.3?Flex 彈性布局的常見屬性
1.4 Flex彈性布局部分屬性詳解
1.4.1?flex-direction屬性
1.4.2?flex-wrap屬性
1.4.3?flex-flow屬性
1.4.4?justify-content屬性
1.4.5?align-items屬性
1.4.6?align-content屬性
二、輪播圖后臺(tái)數(shù)據(jù)獲取及組件使用
三、首頁(yè)布局
一、Flex彈性布局
學(xué)習(xí)地址如下：Flex 布局語(yǔ)法教程 | 菜鳥教程網(wǎng)頁(yè)布局（layout）是CSS的一個(gè)重點(diǎn)應(yīng)用。 布局的傳統(tǒng)解決方案，基于盒狀模型，依賴?display屬性 +?position屬性 +?float屬性。它對(duì)于那些特殊布局非常不方便，比如，垂直居中就不容易實(shí)現(xiàn)。 2009年，W3C提出了一種新的方案—-Flex布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能。 Flex布局將成為未來(lái)布..http://www.runoob.com/w3cnote/flex-grammar.html
1.1 什么是Flex彈性布局
1.1.1 詳解
Flex 彈性布局是一種用于網(wǎng)頁(yè)布局的現(xiàn)代 CSS 技術(shù)，旨在更靈活地管理容器內(nèi)的元素排列和分布，以實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)和更好的頁(yè)面布局控制。Flex 布局基于彈性盒子模型，通過(guò)使用
display: flex屬性，你可以將一個(gè)容器轉(zhuǎn)變?yōu)橐粋€(gè)彈性容器，從而控制其內(nèi)部子元素的排列方式。
1.1.2 圖解?
1.1.3 代碼演示效果
在進(jìn)行Flex彈性布局屬性的代碼預(yù)演前，我們需進(jìn)行小程序會(huì)議OA項(xiàng)目大致架子的搭建，具體操作如下：
先建立一個(gè)新的Js項(xiàng)目模板，把pages下的所有目錄清空，然后在app.json中加入以下代碼：
{
"pages": [
"pages/index/index",
"pages/meeting/list/list",
"pages/vote/list/list",
"pages/ucenter/index/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle": "black"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁(yè)",
"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": "會(huì)議"
},
{
"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": "設(shè)置"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}接著把static靜態(tài)資源復(fù)制到存放代碼的區(qū)間中，如下：
然后我們的微信開發(fā)者工具中就會(huì)自動(dòng)生成目標(biāo)目錄，如下：
到這里我們的會(huì)議OA項(xiàng)目架子就搭建好了，效果展示如下：
架子搭好之后我們需要在tab上(一級(jí)菜單)演示一下彈性布局到底是什么來(lái)幫助大家理解，我們?cè)谕镀苯缑鎭?lái)給大家展示一下，首先在list.wxml中插入以下代碼：
<!--pages/vote/list/list.wxml-->
<!-- <text>pages/vote/list/list.wxml</text> -->
<view class="box">
<view>1</view>
<view>2</view>
<view>3</view>
<view>4</view>
<view>5</view>
<view>6</view>
<view>7</view>
<view>8</view>
<view>9</view>
<view>10</view>
<view>11</view>
<view>12</view>
</view>然后在list.wxss中加入樣式來(lái)幫助大家更直觀的看到效果，代碼如下：
/* pages/vote/list/list.wxss */
.box{
height:750rpx;
width:750rpx;
background-color: rgb(24, 230, 185);
}
view{
height: 100rpx;
width: 100rpx;
border: 1px solid red;
}模擬器展示頁(yè)面如下：
緊接著我們?cè)趌ist.wxss頁(yè)面中.box樣式代碼塊下加入關(guān)鍵代碼（Flex彈性布局），如下：
display:?flex;
然后我們接著打開模擬器觀察頁(yè)面，如下：
在沒有加入flex的時(shí)候view塊狀元素是超出了我們的box盒范圍的。但是加入了之后，就可以非常直觀的看到我們每一個(gè)塊狀元素設(shè)置的大小都是100rpx，12個(gè)view塊狀元素加起來(lái)就是1200rpx，但是頁(yè)面的總寬高設(shè)置的是750rpx，但是意外的是750rpx的頁(yè)面承載了12個(gè)view快狀元素，這個(gè)就是Flex彈性布局的特點(diǎn)。
1.2 Flex彈性布局的核心概念
Flex 彈性布局（Flexbox，也稱為彈性盒子布局）是一種用于網(wǎng)頁(yè)布局的現(xiàn)代 CSS 技術(shù)，它引入了一些核心概念，以便更靈活地排列和分布頁(yè)面上的元素。以下是 Flex 彈性布局的核心概念：
Flex 容器 (Flex Container):
- Flex 布局始于一個(gè)容器。這個(gè)容器的 CSS 屬性值設(shè)為?
display: flex?或?display: inline-flex。它會(huì)成為一個(gè) Flex 容器，其中的子元素（也叫做 Flex 項(xiàng)）會(huì)根據(jù)容器的規(guī)則進(jìn)行排列。Flex 項(xiàng) (Flex Items):
- Flex 容器內(nèi)部的直接子元素稱為 Flex 項(xiàng)。這些項(xiàng)會(huì)根據(jù)容器的規(guī)則進(jìn)行排列和分布。
主軸 (Main Axis):
- Flex 容器內(nèi)有一個(gè)主軸，通常是水平方向或垂直方向。主軸的方向由?
flex-direction?屬性控制。水平主軸對(duì)應(yīng)于?row?和?row-reverse?值，而垂直主軸對(duì)應(yīng)于?column?和?column-reverse?值。交叉軸 (Cross Axis):
- 交叉軸是與主軸垂直的軸，它的方向由主軸的方向決定。例如，如果主軸是水平的，那么交叉軸是垂直的。
主軸起點(diǎn)和終點(diǎn):
- 主軸的起點(diǎn)是 Flex 容器的起始位置，而主軸的終點(diǎn)是容器的結(jié)束位置。這取決于主軸的方向，可以使用?
justify-content?屬性控制主軸上的元素如何在容器內(nèi)分布。交叉軸起點(diǎn)和終點(diǎn):
- 交叉軸的起點(diǎn)和終點(diǎn)是與主軸垂直的軸上的位置，可以使用?
align-items?屬性控制交叉軸上的元素如何對(duì)齊。伸縮性 (Flexibility):
- Flex 項(xiàng)具有伸縮性，它們可以根據(jù)可用空間按比例分配或縮小。這由?
flex-grow?和?flex-shrink?屬性控制。初始尺寸 (Flex Basis):
- Flex 項(xiàng)的初始尺寸由?
flex-basis?屬性控制。這表示項(xiàng)在分配額外空間之前的尺寸。Flex 值 (Flex Value):
flex?屬性是一個(gè)縮寫屬性，用于同時(shí)設(shè)置?flex-grow、flex-shrink?和?flex-basis。排列順序 (Order):
- 通過(guò)?
order?屬性，可以為每個(gè) Flex 項(xiàng)指定一個(gè)整數(shù)值，以控制它們的排列順序。
這些核心概念使得 Flex 彈性布局非常有用，因?yàn)樗峁┝烁`活的布局方式，允許容器內(nèi)的元素根據(jù)容器的大小和方向進(jìn)行動(dòng)態(tài)排列。這對(duì)于實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)和解決布局問(wèn)題非常有幫助。
1.3?Flex 彈性布局的常見屬性
Flex 彈性布局常見屬性包括：
display:
- 定義一個(gè)容器為 Flex 容器。
- 可以取值為?
flex?或?inline-flex。
flex-direction:
- 定義 Flex 容器的主軸方向。
- 可以取值為?
row（水平方向）、row-reverse（反向水平方向）、column（垂直方向）或?column-reverse（反向垂直方向）。
flex-wrap:
- 定義 Flex 容器的項(xiàng)是否換行。
- 可以取值為?
nowrap（不換行）、wrap（換行）或?wrap-reverse（反向換行）。
justify-content:
- 定義 Flex 容器內(nèi) Flex 項(xiàng)在主軸上的對(duì)齊方式。
- 可以取值為?
flex-start、flex-end、center、space-between、space-around?或?space-evenly。
align-items:
- 定義 Flex 容器內(nèi) Flex 項(xiàng)在交叉軸上的對(duì)齊方式。
- 可以取值為?
flex-start、flex-end、center、baseline?或?stretch。
align-content:
- 定義多根交叉軸線的對(duì)齊方式。
- 僅在容器有多行的情況下有效。
- 可以取值為?
flex-start、flex-end、center、space-between、space-around?或?stretch。
flex:
- 是?
flex-grow、flex-shrink?和?flex-basis?的縮寫。- 用于設(shè)置 Flex 項(xiàng)的伸縮性。
flex-grow:
- 定義了 Flex 項(xiàng)在容器內(nèi)分配額外空間的能力。
- 值為一個(gè)非負(fù)整數(shù)，表示相對(duì)于其他 Flex 項(xiàng)的放大比例。
flex-shrink:
- 定義了 Flex 項(xiàng)在容器內(nèi)收縮的能力。
- 值為一個(gè)非負(fù)整數(shù)，表示相對(duì)于其他 Flex 項(xiàng)的收縮比例。
flex-basis:
- 定義了 Flex 項(xiàng)在分配額外空間之前的初始尺寸。
- 可以設(shè)置為一個(gè)長(zhǎng)度值或百分比。
order:
- 定義了 Flex 項(xiàng)的排列順序。
- 值為一個(gè)整數(shù)，決定了項(xiàng)的排列順序，值越小越靠前。
這些屬性是使用 Flex 彈性布局時(shí)常用的一些關(guān)鍵屬性，通過(guò)合理地組合和設(shè)置這些屬性，可以實(shí)現(xiàn)各種不同的布局效果。
1.4 Flex彈性布局部分屬性詳解
1.4.1?flex-direction屬性
flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）。
在list.wxss中.box樣式代碼塊下加入以下代碼：
flex-direction: column;加入后模擬器展示如下所示：
1.4.2?flex-wrap屬性
默認(rèn)情況下，項(xiàng)目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
注：它可能取三個(gè)值。分別如下：
（1）nowrap（默認(rèn)）：不換行。
（2）wrap：換行，第一行在上方。
（3）wrap-reverse：換行，第一行在下方。
把flex-derection屬性的代碼注釋后，在list.wxss中加入以下代碼：
flex-wrap: wrap;?模擬器效果演示：
1.4.3?flex-flow屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為row nowrap。
跟前面一樣，把上一個(gè)效果的代碼注釋掉之后，加入以下代碼：
flex-flow: row wrap;模擬器展示效果如下：
1.4.4?justify-content屬性
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。?
它可能取5個(gè)值，具體對(duì)齊方式與軸的方向有關(guān)。下面假設(shè)主軸為從左到右。
- flex-start（默認(rèn)值）：左對(duì)齊
- flex-end：右對(duì)齊
- center： 居中
- space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。
- space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。
在list.wxss中加入以下代碼：
justify-content: flex-end;右對(duì)齊展示效果如下：
1.4.5?align-items屬性
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。
它可能取5個(gè)值。具體的對(duì)齊方式與交叉軸的方向有關(guān)，下面假設(shè)交叉軸從上到下。
- flex-start：交叉軸的起點(diǎn)對(duì)齊。
- flex-end：交叉軸的終點(diǎn)對(duì)齊。
- center：交叉軸的中點(diǎn)對(duì)齊。
- baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。
- stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。
在list.wxss中加入以下代碼：
align-items: flex-end;模擬器展示效果如下：
1.4.6?align-content屬性
align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。
該屬性可能取6個(gè)值。分別如下：
- flex-start：與交叉軸的起點(diǎn)對(duì)齊。
- flex-end：與交叉軸的終點(diǎn)對(duì)齊。
- center：與交叉軸的中點(diǎn)對(duì)齊。
- space-between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。
- space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
- stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。
二、輪播圖后臺(tái)數(shù)據(jù)獲取及組件使用
思路：用Mock模擬后臺(tái)給前臺(tái)響應(yīng)數(shù)據(jù)
新建一個(gè)名為config的文件夾，文件夾下新建api.js專門放接口地址，?如下：
建好之后在api.js中加入以下代碼：
// 以下是業(yè)務(wù)服務(wù)器API地址
// 本機(jī)開發(fā)API地址
var WxApiRoot = 'http://localhost:8080/demo/wx/';
// 測(cè)試環(huán)境部署api地址
// var WxApiRoot = 'http://192.168.0.101:8070/demo/wx/';
// 線上平臺(tái)api地址
//var WxApiRoot = 'https://www.oa-mini.com/demo/wx/';
module.exports = {
IndexUrl: WxApiRoot + 'home/index', //首頁(yè)數(shù)據(jù)接口
SwiperImgs: WxApiRoot+'swiperImgs', //輪播圖
MettingInfos: WxApiRoot+'meeting/list', //會(huì)議信息
};然后在index.js中加入以下代碼：
const api = require("../../config/api")
data: {
imgSrcs:[]
},
loadSwiperImgs(){
let that=this;
wx.request({
url: api.SwiperImgs,
dataType: 'json',
success(res) {
console.log(res)
that.setData({
imgSrcs:res.data.images
})
}
})
},加入之后我們重新編譯代碼，發(fā)現(xiàn)報(bào)錯(cuò)了，錯(cuò)誤信息如下：
這樣的問(wèn)題是因?yàn)槲⑿砰_發(fā)者程序默認(rèn)是校驗(yàn)合法域名的，所以我們需要設(shè)置以下，如下：
但是在此后，我們發(fā)現(xiàn)它又報(bào)了另一個(gè)錯(cuò)誤，如下：
這個(gè)問(wèn)題是因?yàn)槲覀冋?qǐng)求后臺(tái)服務(wù)器時(shí)出現(xiàn)錯(cuò)誤，但是我們并沒有啟動(dòng)后臺(tái)服務(wù)器，因?yàn)槭?strong>用Mock模擬后臺(tái)給前臺(tái)響應(yīng)數(shù)據(jù)，所以這里我們啟用一下Mock就可以了，具體操作如下：
JSON數(shù)據(jù)包代碼如下：
{
"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"
}
}然后我們重新編譯代碼，控制器效果圖如下：
到這里就算拿到我們的后臺(tái)數(shù)據(jù)了。接著繼續(xù)優(yōu)化我們的代碼，如下：
在index.wxml中加入以下代碼：
<!--pages/index/index.wxml-->
<view>
<swiper indicator-dots="true" autoplay="true" >
<block wx:for="{{imgSrcs}}" wx:key="*text">
<swiper-item>
<image src=" {{item.img}}"></image>
</swiper-item>
</block>
</swiper>
</view>模擬器展示效果如下：
三、首頁(yè)布局
輪播圖我們已經(jīng)弄好了，接下來(lái)就是會(huì)議信息等代碼了，如下：
先在index.wxml中加入以下代碼：
<view class="mobi-title">
<text class="mobi-icon"></text>
<text>會(huì)議信息</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>人報(bào)名</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.wxss中加入以下樣式代碼，如下：
/* pages/index/index.wxss */
.mobi-title{
background-color: lightgray;
padding: 10px;
}
.mobi-icon{
border: 1rpx solid rgb(250, 126, 126);
margin-right: 5px;
}
.mobi-title text{
font-weight: 700;
color: lightslategrey;
}
.list{
display: flex;
align-items: center;
border-bottom: 3px solid lightgray;
}
.list-img{
padding: 0 10px;
}
.video-img{
height: 80px;
width: 80px;
}
.list-title{
font-weight: 700;
margin: 3px 0;
}
.list-tag{
display: flex;
align-items: center;
}
.state{
border: 2px solid lightblue;
padding: 3px 6px;
color: lightblue;
margin: 0 5px 10px 0;
}
.join{
color: lightgray;
}
.list-num{
color: red;
font-weight: 700;
}
.list-info{
color: lightgray;
font-size: 12px;
}
最后模擬器演示效果如下：
最后微信小程序進(jìn)階——Flex彈性布局&輪播圖&會(huì)議OA項(xiàng)目（首頁(yè)）就到這里，祝大家在敲代碼的路上一路通暢!
感謝大家的觀看 !文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-754383.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-754383.html
到了這里，關(guān)于微信小程序進(jìn)階——Flex彈性布局&輪播圖&會(huì)議OA項(xiàng)目（首頁(yè)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
