小程序开发基础-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;
}

原文地址：http://blog.51cto.com/13842645/2163992

时间： 2024-10-28 09:53:14

小程序开发基础-view视图容器的相关文章

微信小程序开发基础（一）「配置」与「逻辑层」

微信小程序作为微信生态重要的一环,在实际生活.工作.商业中的应用越来越广泛.想学习微信小程序开发的朋友也越来越多,本文将在小程序框架的基础上就微信小程序项目开发所必需的基础知识及语法特点进行了详细总结和阐述,包括配置.函数.语法.事件及其处理.数据绑定.模块.样式等.想开发小程序,这些内容是必须掌握的. 全文知识结构预览: 一.程序配置: 1.全局配置:2.页面配置 二.逻辑层: 1.程序注册:App()方法:2.页面注册:Page()方法:3.模块与调用:4.微信原生API 三.视图层(将在单

微信小程序开发基础知识总结

微信小程序在无论在功能.文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们的小程序在很多方面突破H5页面应用的限制,更加接近原生程序的功能,因此微信小程序具有很大的前景想象力.它提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上. 1.小程序的目录结构 小程序的目录结构如下所示. 其中项目级别的的文件包括 app.js.ap

微信小程序开发基础之逻辑层

一.注册程序 App() 方法 参数 类型 描述 触发时机 onLanuch Function 生命周期函数--监听小程序初始化 当小程序初始化完成时,会触发 onLaunch(全局只触发一次) onShow Function 生命周期函数--监听小程序显示 当小程序启动,或从后台显示,会触发 onShow onHide Function 生命周期函数 -- 监听小程序隐藏 当小程序从前台进入后台,会触发 onHide onError Function 错误监听函数 当小程序发生脚本错误,或者

微信小程序开发基础（一）注册账号

想要开发小程序首先要注册一个账号 申请账号 进入微信公众平台,根据提示注册账号. 在这你可以管理你的小程序的权限,查看数据报表,发布小程序等操作. 登录微信公众平台,在菜单'设置'-'开发设置'看到小程序的AppID了. 安装开发工具 前往 开发者工具下载页面,根据自己的操作系统下载对应的安装包进行安装. 打开小程序开发者工具,用微信扫码登录,然后就开始开发小程序吧! 第一个小程序 新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请到的小程序的AppID,给你的项目起一个名字, 最后勾

微信小程序开发视频教程

课程:拜师学艺,微信小程序从入门到大神必经之路(第一季,共四季) 课程观看地址:http://www.xuetuwuyou.com/course/172/lesson/list 课程出自学途无忧网:http://www.xuetuwuyou.com 讲师:风舞烟 课时列表: 第一部_诞生 - 天降大任:名门贵族,互联网开发新宠--小程序横空出世 第1章 : 忽如一夜春风来--小程序的前世今生 课时1:课程开场 课时2:本章目标及任务 课时3:第一回合_小王子出世-微信小程序_小程序为什么这么火

小程序&#183;巧应用，微信小程序开发实战

系统全面地讲解微信小程序的开发技术.开篇创建一个小程序项目并解析体验,介绍如何由零开始创建一个小程序,全面体验小程序的开发工具.界面.开发框架.实现过程及其主要代码框架,了解小程序的应用场景及开发要求.接着介绍小程序开发基础,包括小程序开发的语言与语法.函数方法.模块.事件交互等.然后详细介绍了组件的应用与开发,包括开发过程与组件应用技巧,还详细分析了API接口,包括使用各个微信原生API接口进行小程序开发的技巧.最后介绍了几个小程序实战案例,让读者实践小程序各项能力的应用及掌握一些应用技巧.本

小程序+巧应用-微信小程序开发实战pdf

下载地址:网盘下载 系统全面地讲解微信小程序的开发技术.开篇创建一个小程序项目并解析体验,介绍如何由零开始创建一个小程序,全面体验小程序的开发工具.界面.开发框架.实现过程及其主要代码框架,了解小程序的应用场景及开发要求.接着介绍小程序开发基础,包括小程序开发的语言与语法.函数方法.模块.事件交互等.然后详细介绍了组件的应用与开发,包括开发过程与组件应用技巧,还详细分析了API接口,包括使用各个微信原生API接口进行小程序开发的技巧.最后介绍了几个小程序实战案例,让读者实践小程序各项能力的应用及

微信应用号小程序开发（义乌永康火爆版）

微信小程序 微信小程序是什么? 微信应用号是一个APP应用推广平台,微信应用号目前暂定名为“小程序”,使用微信应用号平台,用户关注一个应用号就如同安装一个App一样,而微信应用号就相当于另一个App Store,主要功能就是应用推广. 用户关注一个应用号就如同安装一个App一样,而微信应用号就相当于另一个App Store,主要功能就是应用推广.微信的目的似乎很简单,就是希望把用户使用App的动作都集中在微信上. 金华腾云科技总结:应用号有两大特色:首先APP功能可以直接通过关注应用号来实现,所

9小时搞定微信小程序开发

第01讲-小程序的背景 第02.第2讲-什么是小程序 第03讲-小程序生态及应用前景 第04讲-小程序开发前的准备 第05讲-安装微信开发者工具 第06讲-小程序代码结构简介 第07讲-小程序配置文件介绍 第08讲-开发者工具详解(一) 第09讲-开发者工具详解(二) 第10讲-创建第一个小程序 第11讲-开发框架组成介绍 第12讲-WXML之语法 第13讲-WXML特性之数据绑定 第14讲-WXML特性之列表渲染 第15讲-WXML特性之条件渲染 第16讲-WXML特性之模板及引用 第17讲-