前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP最新优惠活动
返回腾讯云官网
社区首页 >专栏 >小程序开发基础-view视图容器

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

作者头像
达达前端
发布于 2019-07-03 12:41:37
8300
发布于 2019-07-03 12:41:37
举报
文章被收录于专栏：达达前端

标题图

查看官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/

view

视图容器。

代码语言：javascript
复制
// 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>
代码语言：javascript
复制
// 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;
}

图片

代码语言：javascript
复制
// 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>
代码语言：javascript
复制
// 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;
}

图片

代码语言：javascript
复制
// 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>
代码语言：javascript
复制
// 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

代码语言：javascript
复制
// 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>
代码语言：javascript
复制
// 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

代码语言：javascript
复制
// 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>
代码语言：javascript
复制
// 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

代码语言：javascript
复制
// 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>
代码语言：javascript
复制
// 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

代码语言：javascript
复制
// 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>
代码语言：javascript
复制
// 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

代码语言：javascript
复制
// 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>
代码语言：javascript
复制
// 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

两边间隔与中间相同

源码

代码语言：javascript
复制
// 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>
代码语言：javascript
复制
// 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 点赞
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018.08.17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
容器
github
git
开源

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

容器
github
git
开源
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
LV.
文章
0
获赞
0
目录
  • view
  • 属性
  • 源码
  • 开源github分享
  • 结语
相关产品与服务
容器服务
腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。
产品介绍产品文档
11.11 上云拼团GO
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2024 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论