zoukankan      html  css  js  c++  java

  • 小程序开发基础-view视图容器

    标题图

    view

    视图容器。

    // wxml
<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp_one">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
    // wxss
.flex-wrp_one{
  display: flex;
  flex-direction: row;
}
.flex-item{
  width: 100px;
  height: 100px;
}

.bc_green{
  background: green;
}

.bc_red{
  background: red;
}

.bc_blue{
  background: blue;
}

    图片

    // wxml
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp_two">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
    // wxss
.flex-wrp_two{
  display: flex;
  flex-direction: column;
}
.flex-item{
  width: 100px;
  height: 100px;
}

.bc_green{
  background: green;
}

.bc_red{
  background: red;
}

.bc_blue{
  background: blue;
}

    图片

    // wxml
<view class="section">
  <view class="section__title">justify-content: flex-start</view>
  <view class="flex-wrp_three">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
    // wxss 
.flex-wrp_three{
  display: flex;
  justify-content: flex-start;
}
.flex-item{
  width: 100px;
  height: 100px;
}

.bc_green{
  background: green;
}

.bc_red{
  background: red;
}

.bc_blue{
  background: blue;
}

    view

    // wxml
<view class="section">
  <view class="section__title">justify-content: flex-end</view>
  <view class="flex-wrp_four">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
    // wxss
.flex-wrp_four{
  display: flex;
  justify-content: flex-end;
}
.flex-item{
  width: 100px;
  height: 100px;
}

.bc_green{
  background: green;
}

.bc_red{
  background: red;
}

.bc_blue{
  background: blue;
}

    view

    // wxml
<view class="section">
  <view class="section__title">justify-content: center</view>
  <view class="flex-wrp_five">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
    // wxss
.flex-wrp_five{
  display: flex;
  justify-content: center;
}
.flex-item{
  width: 100px;
  height: 100px;
}

.bc_green{
  background: green;
}

.bc_red{
  background: red;
}

.bc_blue{
  background: blue;
}

    view

    // wxml
<view class="section">
  <view class="section__title">justify-content: space-between</view>
  <view class="flex-wrp_six">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
    // wxss
.flex-wrp_six{
  display: flex;
  justify-content: space-between;
}
.flex-item{
  width: 100px;
  height: 100px;
}

.bc_green{
  background: green;
}

.bc_red{
  background: red;
}

.bc_blue{
  background: blue;
}

    view

    // wxml
<view class="section">
  <view class="section__title">justify-content: space-around</view>
  <view class="flex-wrp_seven">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
    // wxss
.flex-wrp_seven{
  display: flex;
  justify-content: space-around;
}
.flex-item{
  width: 100px;
  height: 100px;
}

.bc_green{
  background: green;
}

.bc_red{
  background: red;
}

.bc_blue{
  background: blue;
}

    view

    // wxml
<view class="section">
  <view class="section__title">justify-content: space-evenly</view>
  <view class="flex-wrp_eight">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
    // wxss
.flex-wrp_eight{
  display: flex;
  justify-content: space-evenly;
}
.flex-item{
  width: 100px;
  height: 100px;
}

.bc_green{
  background: green;
}

.bc_red{
  background: red;
}

.bc_blue{
  background: blue;
}

    view

    属性

    排列方式(flex-direction) 描述
    row 横向排列
    column 纵向排列
    项目内容对齐（justify-content） 描述
    flex-start 向行头紧挨
    flex-end 向行尾紧挨
    center 居中紧挨
    space-between 平均分布
    space-around 平均分布 ,两边留有一半间隔
    space-evenly 两边间隔与中间相同

    源码

    // wxml
<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp_one">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp_two">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

<view class="section">
  <view class="section__title">justify-content: flex-start</view>
  <view class="flex-wrp_three">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

<view class="section">
  <view class="section__title">justify-content: flex-end</view>
  <view class="flex-wrp_four">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

<view class="section">
  <view class="section__title">justify-content: center</view>
  <view class="flex-wrp_five">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

<view class="section">
  <view class="section__title">justify-content: space-between</view>
  <view class="flex-wrp_six">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

<view class="section">
  <view class="section__title">justify-content: space-around</view>
  <view class="flex-wrp_seven">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

<view class="section">
  <view class="section__title">justify-content: space-evenly</view>
  <view class="flex-wrp_eight">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
    // wxss
.flex-wrp_one{
  display: flex;
  flex-direction: row;
}

.flex-wrp_two{
  display: flex;
  flex-direction: column;
}

.flex-wrp_three{
  display: flex;
  justify-content: flex-start;
}

.flex-wrp_four{
  display: flex;
  justify-content: flex-end;
}

.flex-wrp_five{
  display: flex;
  justify-content: center;
}

.flex-wrp_six{
  display: flex;
  justify-content: space-between;
}

.flex-wrp_seven{
  display: flex;
  justify-content: space-around;
}

.flex-wrp_eight{
  display: flex;
  justify-content: space-evenly;
}

.flex-item{
  width: 100px;
  height: 100px;
}

.bc_green{
  background: green;
}

.bc_red{
  background: red;
}

.bc_blue{
  background: blue;
}

    开源github分享

    Wechat_small_program_Share
    微信小程序分享��
    Github 欢迎 Star、Fork

    结语

    • 本文主要讲解 小程序开发基础-view视图容器
    • 下面我将继续对其他知识 深入讲解 ，有兴趣可以继续关注
    • 小礼物走一走 or 点赞

    送❤
  • 相关阅读:
    Linux实战教学笔记44：NoSQL数据库开篇之应用指南
    Linux实战教学笔记43：squid代理与缓存实践（二）
    Linux实战教学笔记42：squid代理与缓存实践（一）
    Linux实战教学笔记41：企业级SVN版本管理与大型代码上线方案
    Linux实战教学笔记40： Mha-Atlas-MySQL高可用方案实践(二)
    Linux实战教学笔记39：Mha-Atlas-MySQL高可用方案实践（一）
    Linux实战教学笔记38：企业级Nginx Web服务优化实战（下）
    Linux实战教学笔记37：企业级Nginx Web服务优化实战（上）
    Linux实战教学笔记36：PHP服务缓存加速深度优化实践
    Linux实战教学笔记35：企业级监控Nagios实践（下）
  • 原文地址：https://www.cnblogs.com/dashucoding/p/11932508.html
Copyright © 2011-2022 走看看