首页
所有分类
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 相关文章推荐
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
vue.js初学入门教程（1）
Nov 03 Javascript
React组件的三种写法总结
Jan 12 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
JS删除对象中某一属性案例详解
Sep 08 Javascript
react中props 的使用及进行限制的方法
Apr 28 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
求职信(1029) 职业生涯规划书(234) 自我评价(886) 心得体会(660) 思想汇报(404) 创业计划书(312) 推荐信(292) 自荐信(981) 岗位职责(1324) 自我鉴定(671)
You might like
thinkphp模板输出技巧汇总
2014/11/24 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
JQuery从头学起第二讲
2010/07/04 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
JavaScript继承与聚合实例详解
2019/01/22 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
python线程池threadpool使用篇
2018/04/27 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
材料物理专业大学毕业生求职信
2013/10/15 职场文书
求职简历中的自我评价分享
2013/12/08 职场文书
健康教育评估方案
2014/05/25 职场文书
真诚的求职信
2014/07/04 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
教师年终个人总结
2015/02/11 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
Nginx如何配置根据路径转发详解
2022/07/23 Servers