一、Flex彈性布局

布局的傳統(tǒng)解決方案，基于盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對于那些特殊布局非常不方便，比如，垂直居中就不容易實現(xiàn)。

2009年，W3C提出了一種新的方案—-Flex布局，可以簡便、完整、響應式地實現(xiàn)各種頁面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項功能。

1.Flex布局是什么？?

Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。

任何一個容器都可以指定為Flex布局。

.box{
? display: flex;
}

行內(nèi)元素也可以使用Flex布局。

.box{
? display: inline-flex;
}

Webkit內(nèi)核的瀏覽器，必須加上-webkit前綴。

.box{
? display: -webkit-flex; /* Safari */
? display: flex;
}

注意，設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。?

2.基本概念

采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。

項目默認沿主軸排列。單個項目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。

3.容器的屬性

以下6個屬性設置在容器上。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

3.1 flex-direction屬性
flex-direction屬性決定主軸的方向（即項目的排列方向）。

.box {
? flex-direction: row | row-reverse | column | column-reverse;
}

它可能有4個值。

row（默認值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。

3.2 flex-wrap屬性

默認情況下，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。

.box{
? flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三個值。

（1）nowrap（默認）：不換行。

（2）wrap：換行，第一行在上方。

（3）wrap-reverse：換行，第一行在下方。

3.3 flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。

.box {
? flex-flow: <flex-direction> <flex-wrap>;
}

3.4 justify-content屬性

justify-content屬性定義了項目在主軸上的對齊方式。

.box {
? justify-content: flex-start | flex-end | center | space-between | space-around;
}

?

它可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸為從左到右。

flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，項目之間的間隔都相等。
space-around：每個項目兩側(cè)的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

3.5 align-items屬性

align-items屬性定義項目在交叉軸上如何對齊。

.box {
? align-items: flex-start | flex-end | center | baseline | stretch;
}

?

它可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。

flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

3.6 align-content屬性

align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

.box {
? align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

該屬性可能取6個值。

flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸。

二、首頁布局搭建

1.底部頁面的搭建

一個微信小程序必不可少的就是底部導航欄，所以我們先搭建一個底部導航欄 ，根據(jù)微信小程序的開發(fā)者文檔可知，底部導航欄需要在api.json定義tabBar并做好相應的配置（注意先在pages做好頁面的定義）。

底部導航欄沒有圖標是顯得非常單調(diào)的，所以我們還要創(chuàng)建一個文件夾名為static用來存放圖片

繼續(xù)在static文件夾下創(chuàng)建一個文件名為tabBar，將我們所需的圖標放入，搭配屬性iconPath引用圖標即可。

在app.josn加入

// app.json部分代碼展示
 
  "pages":[
    "pages/index/index",
    "pages/meeting/list/list",
    "pages/vote/list/list",
    "pages/ucenter/index/index",
    "pages/logs/logs"
  ],
  "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": "設置"
      }]
  }

效果展示：

?2.首頁輪播圖搭建

新建一個名為config的文件夾，文件夾下新建api.js專門放接口地址，?如下：

并且在api.js中加入以下代碼：

// 以下是業(yè)務服務器API地址
 // 本機開發(fā)API地址
var WxApiRoot = 'http://localhost:8080/demo/wx/';
// 測試環(huán)境部署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', //首頁數(shù)據(jù)接口
  SwiperImgs: WxApiRoot+'swiperImgs', //輪播圖
  MettingInfos: WxApiRoot+'meeting/list', //會議信息
};

?在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ā)者程序默認是校驗合法域名的，所以我們需要設置以下，如下：

?文章來源地址http://www.zghlxwxcb.cn/news/detail-714564.html

?但是在此后，我們發(fā)現(xiàn)它又報了另一個錯誤，如下：

?這是我們請求后臺服務器時出現(xiàn)錯誤，但是我們并沒有啟動后臺服務器，因為是用Mock模擬后臺給前臺響應數(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"
  }
}

重新編譯就不會出現(xiàn)問題了

到這里就算拿到我們的后臺數(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>

?效果圖：

?三、首頁布局

輪播圖我們已經(jīng)弄好了，接下來就是會議信息等代碼了，如下：

先在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.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;
}
 

效果圖：

?

?

到了這里，關于微信小程序--數(shù)字化會議OA系統(tǒng)之首頁搭建的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！