WeChat의 유연한 레이아웃 이해 - 간단히 페이지 구축

Flex 레이아웃 소개

상자 모델을 기반으로 하는 전통적인 레이아웃 솔루션은 디스플레이 속성 + 위치 속성 + 플로트 속성에 의존합니다.

플렉스 레이아웃이란?

Flex는 Flexible Box의 약자로 "탄력적인 레이아웃"을 의미하며 박스 모델에 최대의 유연성을 제공하기 위해 사용됩니다.

모든 컨테이너를 플렉스 레이아웃으로 지정할 수 있습니다.

디스플레이: '플렉스'

컨테이너에는 기본적으로 가로 기본 축과 세로 교차 축의 두 축이 있습니다. 주축의 시작 위치(경계와의 교차점)를 주 시작, 끝 위치를 주 끝, 교차 축의 시작 위치를 교차 시작, 끝 위치를 교차 끝이라고 합니다.

항목은 기본적으로 기본 축을 따라 정렬됩니다. 단일 아이템이 차지하는 주축 공간을 메인 사이즈, 단일 아이템이 차지하는 교차축 공간을 크로스 사이즈라고 합니다.

플렉스 속성

플렉스 방향

기본 축의 방향은 기본적으로 행입니다.

flex-wrap 축 선이 맞지 않는 경우 선을 래핑하는 방법

flex-flow는 flex-direction 및 flex-wrap 속성의 줄임말입니다.

정당화-내용

기본 축에서 항목의 정렬을 정의합니다.

정렬 항목

항목이 교차 축에 정렬되는 방식을 정의합니다.

align-content 속성은 여러 축의 정렬을 정의합니다.

플렉스 레이아웃이 설정된 후에는 하위 요소의 float, clear 및 vertical-align 속성이 유효하지 않게 됩니다.

학습 주소:

http://www.runoob.com/w3cnote/flex-grammar.html

컨퍼런스 OA 프로젝트-홈

머리말

애플릿에는 DOM 개체가 없으며 모든 것이 구성 요소화를 기반으로 합니다.

예비 지식

이벤트 메커니즘 이해

컴포넌트화 이해

데이터 바인딩 이해

플렉스 레이아웃

모바일 적응 솔루션

사려 깊은 팁

Vue를 배운 후 작은 프로그램을 개발하는 것이 더 쉽습니다.

표적

구성

구성/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', //会议信息
};

확실한

앱.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": "设置"
      }]

모의 도구

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"
  }
}

기본 가상 데이터에 대한 WeChat 개발자 도구와 함께 제공되는 Mock

페이지

index.css

page{
    height: 100%;
    background-color: #efeff4;
}

강타

index.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>

index.css

.swiper-item {
    height: 300rpx;
    width: 100%;
    border-radius: 10rpx;
}

index.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
          })
        }
      })
  }

페이지 로드 함수에서 로드 데이터 메소드 호출

회의 정보

모의 데이터

{
  "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"
  }
}

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

WeChat의 유연한 레이아웃 이해 - 간단히 페이지 구축

рекомендация