首页
所有分类
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 相关文章推荐
js动态修改整个页面样式达到换肤效果
May 23 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
vue.js表格分页示例
Oct 18 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
vue中render函数的使用详解
Oct 12 Javascript
three.js 制作动态二维码的示例代码
Jul 31 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
详解微信小程序的 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
2022年7月新番(1) OVERLORD(1) 后端(1) Vscode(3) 人人对战(1) 双人对弈(1) tokenizer(1) 时钟(1) SSH(3) 算法(1)
You might like
PHP开发的一些注意点总结
2010/10/12 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
JavaScript基本对象
2007/01/11 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
python通过socket查询whois的方法
2015/07/18 Python
python编程实现归并排序
2017/04/14 Python
树莓派采用socket方式文件传输（python）
2019/06/22 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
亚瑟士美国官网：ASICS美国
2017/02/01 全球购物
台湾时尚彩瞳专门店：imeime
2019/08/16 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
歌唱比赛主持词
2014/03/18 职场文书
关于美容院的活动方案
2014/08/14 职场文书
欠款起诉书范文
2015/05/19 职场文书
网吧员工管理制度
2015/08/05 职场文书