首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 21, 2018

本文介绍了小程序开发基础之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;
}

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

图片

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

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

图片

// 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视图容器

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视图容器

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视图容器

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视图容器

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视图容器

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视图容器

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

达叔小生

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
根据json字符串生成Html的一种方式
Jan 09 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
vue下的@change事件的实现
Oct 25 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
详解微信小程序的 request 封装示例
Aug 21 #Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 #Javascript
vue监听对象及对象属性问题
Aug 20 #Javascript
微信小程序中使用自定义图标（阿里icon）的方法
Aug 20 #Javascript
Vue插件打包与发布的方法示例
Aug 20 #Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 #Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 #jQuery
NFS(1) 黑名单(1) ftpserver(1) Logrotate(1) SeaTunnel(1) 批处理(1) Odoo(1) T-SQL(1) 重复数据(2) 排序失效(1)
You might like
PHP与已存在的Java应用程序集成
2006/10/09 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
Javascript中的数学函数
2007/04/04 Javascript
浅说js变量
2011/05/25 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
JS实现手写parseInt的方法示例
2017/09/24 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
JS中类的静态方法，静态变量，实例方法，实例变量区别与用法实例分析
2020/03/14 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
python 数据加密代码
2008/12/24 Python
简述Python中的面向对象编程的概念
2015/04/27 Python
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
python 字符串和整数的转换方法
2018/06/25 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
国外最大的眼镜网站：Coastal
2017/08/09 全球购物
LN-CC英国：伦敦时尚生活的缩影
2019/09/01 全球购物
Monica Vinader官网：英国轻奢珠宝品牌
2020/02/05 全球购物
Vinatis德国：法国领先的葡萄酒邮购公司
2020/09/07 全球购物
Agoda中文官网：安可达（低价预订全球酒店）
2021/01/18 全球购物
中专自荐信
2013/10/13 职场文书
中文系学生自荐信范文
2013/11/13 职场文书
物业电工岗位职责
2013/11/20 职场文书
中专生求职自荐信范文
2013/12/22 职场文书
小饰品店的创业计划书范文
2013/12/28 职场文书
班主任评语大全
2014/04/26 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
品德与社会教学反思
2016/02/24 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python