目录
2.1 基本目录结构
pages:存放页面文件。
utils:存放资源文件。
app.js:小程序逻辑文件。
app.json:小程序公共设置文件。
app.wxss:小程序主样式表文件。
(3个"app"开头的文件是微信小程序框架的主描述文件,是应用程序配置文件,不属于任何页面)
project.config.json:项目配置文件,包含项目名称,AppID等相关信息。
pages目录中有index,logs两个子目录。
index
index.js:处理逻辑。
index.wxml:描述页面内容。
index.wxss:配置页面样式。
logs
logs.js:定义了logs数组。
logs.json:来配置页面title的内容。
logs.wxml:定义了三个标签,分别为view,block和text,其中view标签为容器,block用于绑定 logs数组,而text标签用于显示每一条log。
logs.wxss:对页面样式进行控制。
整体图
2.4 配置文件
全局配置项
1. pages配置项
pages配置项接受一个数组,用来指定小程序有哪些页面组成,数组的每一项都是字符串,代表对象页面的 “路径 + 文件名” 。pages配置项是必填项。
(1)数组第一项用来设定小程序的初始页面。
(2) 在小程序中新增或减少页面时,都需要对数组进行修改。
(3) 文件名不需要写文件扩展名。
2. window配置项
window配置项负责设置小程序状态栏,导航条,标题,窗口背景色等系统样式。
在app.json中设置window配置项
"window": {
"backgroundColor": "#ccc",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "小程序window功能演示",
"navigationBarTextStyle": "black"
},
3. tabBar配置项
当需要在程序顶部或底部设置菜单栏时,可以通过配置tabBar配置项来实现。
4. tabBar中的list选项
list(列表)接受数组值,数组中的每一项也都是一个对象。
在app.json文件中设置tabBar配置
设置new2的“首页”,“新闻”。
"tabBar": {
"color": "#666666",
"selectedColor": "#ff0000",
"backgroundColor": "#ffffff",
"borderStyle":"black",
"list": [
{
"pagePath": "pages/new1/new1",
"iconPath": "images/sy.jpg",
"selectedIconPath": "images/sy.jpg",
"text": "首页"
},
{
"pagePath": "pages/new2/new2",
"iconPath": "images/wx.jpg",
"selectedIconPath": "images/wx.jpg",
"text": "新闻"
}
]
},
5. networkTimeout配置项
小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项进行统一设置,不能在API中单独设置。
例:提高网络响应效率
"networkTimeout":{
"request":20000,
"connectSocket":20000,
"uploadFile":20000,
"downloadFile":20000
},
页面配置文件(*.json)只能设置本页面的窗口表现,而且只能设置window配置项的内容。
6. debug配置项
debug配置项用于开启开发者工具的调试模式,默认为false。开启后,页面的注册,路由,数据更新,事件触发等调试信息将以info的形式输出到Console(控制台)面板上。
2.5 逻辑层文件
项目逻辑文件
项目逻辑文件app.js中可以通过App() 函数注册小程序生命周期函数,全局属性和全局方法,已注册的小程序示例可以在其他页面逻辑文件中通过getApp() 获取。
当小程序初始化完成时,会触发onLaunch(全局只触发一次)
当小程序启动(或从后台进入前台显示),时会触发onshow
当小程序从前台进入后台,会触发onHide
当小程序发生脚本错误,或者API调用失败时,会触发onError并带上错误信息
例:在app.js中写以下代码
// app.js
App({
onLaunch: function () {
console.log("小程序初始化完成.....")
},
onShow: function(options){
console.log("小程序显示");
console.log(this.data);
console.log("小程序进入后台")
},
onError:function(msg){
},
fun:function(){
console.log("在app.js中定义的方法");
},
data: '在app.js中定义的方法'
});
页面逻辑文件
页面逻辑文件的主要功能有:设置初始数据;定义当前页面的生命周期函数;定义事件处理函数等。每个页面文件都有一个相应的逻辑文件,逻辑文件是运行在纯JavaScript引擎中。
1. 设置初始数据
在new2.js输入以下代码
data:{
name:'xzy',
age:100,
birthday:[{year:1924},{month:1},{data:1}],
object:{hobby:'computer'}
},
2. 定义当前页面的生命周期函数
在new2.wxml输入以下代码
<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].data}}日
</view>
<view>爱好:{{object.hobby}}</view>
例:在new1.js和new2.js文件加入以下代码
new1.js
// pages/new1/new1.js
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad:function(options) {
console.log("new1 onLoad......")
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady:function() {
console.log("new1 onReady......")
},
/**
* 生命周期函数--监听页面显示
*/
onShow:function() {
console.log("new1 onShow......")
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide:function() {
console.log("new1 onHide......")
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload:function() {
console.log("new1 onUnload......")
},
})
new2.js
// pages/new1/new1.js
Page({
data:{
name:'xzy',
age:100,
birthday:[{year:1924},{month:1},{data:1}],
object:{hobby:'computer'}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad:function(options) {
console.log("new2 onLoad......")
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady:function() {
console.log("new2 onReady......")
},
/**
* 生命周期函数--监听页面显示
*/
onShow:function() {
console.log("new2 onShow......")
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide:function() {
console.log("new2 onHide......")
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload:function() {
console.log("new2 onUnload......")
},
})
保持并编译后,Console面板出现了
单击new2的“新闻”选项卡,Console面板出现了
再次单击“首页”选项卡,Console面板出现了
3. 定义事件处理函数
定义事件处理函数
myclick:function(){
console.log("点击了view")
}
4. 使用setData更新数据
new2.js:
// pages/new1/new1.js
Page({
data:{
name:'xzy',
age:100,
birthday:[{year:1924},{month:1},{data:1}],
object:{hobby:'steam'}
},
chtext:function(){
this.setData({
name:'haha'
});
},
charray:function(){
this.setData({
'birthday[0].year':1900
});
},
charray:function(){
this.setData({
'object.hobby':'game'
})
},
adddata:function(){
this.setData({
'address':'尼泊尔'
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad:function(options) {
console.log("new2 onLoad......")
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady:function() {
console.log("new2 onReady......")
},
/**
* 生命周期函数--监听页面显示
*/
onShow:function() {
console.log("new2 onShow......")
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide:function() {
console.log("new2 onHide......")
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload:function() {
console.log("new2 onUnload......")
},
})
new2.wxml:
<view>{{name}}</view>
<button bind:tap="chtext">修改普通数据</button>
<view >{{birthday[0].year}}</view>
<button bind:tap="charray">修改数组数据</button>
<view>{{object.hobby}}</view>
<button bind:tap="chobject">修改对象数据</button>
<view>{{address}}</view>
<button bind:tap="adddata">添加数据</button>
效果图:
2.6 页面结构文件
页面结构文件(WXML)是框架设计的一套类似HTML的标签语言,结合基础组件,事件系统,可以构建出页面的结果,即.wxml文件。
WXML还具有数据绑定,条件数据绑定,列表数据绑定,模版,引用页面文件,页面事件等能力。
2.6.1 数据绑定
1. 简单绑定
2. 运算
<view>算数运算:{{age+num}}</view>
<view>逻辑运算:{{age==4}}</view>
<view>三元计算:{{age==4?2:num}}</view>
2.6.2 条件数据绑定
1. wx:if条件数据绑定
<view wx:if="{{age<50}}">1</view>
<view wx:elif="{{age==50}}">2</view>
<view wx:else>3</view>
2.6.3 列表数据绑定
1. wx:for
students:[
{name:'Tom',age:'18',happy:'cs'},
{name:'Anne',age:'16',happy:'mc'},
{name:'joke',age:'20',happy:'ys'}
]
<view wx:for="{{students}}">
<text>姓名:{{item.name}}--年龄:{{item.age}}--爱好:{{item.happy}}</text>
</view>
2.6.4 模版
1. 定义模版
<template name="stu">
2. 调用模版
<template name="stu">
<view wx:for="{{students}}">
<text>姓名:{{item.name}}--年龄:{{item.age}}--爱好:{{item.happy}}</text>
</view>
</template>
<template is="stu" data="{{students}}"></template>
2.6.5 引用页面文件
1. import方式
<text>姓名:{{item.name}}--年龄:{{item.age}}--爱好:{{item.happy}}</text>
//使用import方式引用
<template is="stu" data="{{students}}"></template>
2.include方式
2.6.6 页面事件
Page({
click:function(event){
console.log(event);
}
})
2.7 页面样式方式
1. 尺寸单位
WXSS规定屏幕宽度为750rpx,在系统数据绑定过程中rpx会按比例转化为px。
2. 样式导入
//a.wxss
.cont{border:1px solid #f00;}
//b.wxss
@ import"a.wxss;"
.cont{padding:5rpx;margin:5px;}
3. 选择器
目前,WXSS仅支持CSS中常用的选择器,如.class,#id,element等
4. WXSS常用属性
3.1 盒子模型
微信小程序的视图层由WXML和WXSS 组成。盒子模型就是我们在页面设计中经常用到的一种思维模型。 在CSS 中, 一个独立的盒子模型由内容(content)、内边距(padding)、边框(border)和外边距( margin) 4 个部分组成
盒子模型结果:
盒子模型元素:
图中各元素的含义如下:
width 和height 内容的宽度和高度。
padding - top、padding - right、padding - bottom 和padding - left 上内边距、右内边距、底内边距和左内边距。
border - top、border - right、border - bottom 和border - left 上边框、右边框、底边框和左边框。
margin - top、margin - right、margin - bottom 和margin - left 上外边距、右外边距、底外边距和左外边距。
3.2 块级元素与行内元素
元素按显示方式分为块级元素、行内元素和行内块元素, 它们的显示方式由display 属性控制
3.2.1 块级元素
(1) 一个块级元素占一行。
(2) 块级元素的默认高度由内容决定, 除非自定义高度。
(3) 块级元素的默认宽度是父级元素的内容区宽度, 除非自定义宽度
(4) 块级元素的宽度、高度、外边距及内边距都可以自定义设置。(5) 块级元素可以容纳块级元素和行内元素。
< view/ > 组件默认为块级元素, 使用< view/ > 组件演示盒子模型及块级元素的示例代码如下:
<!-- 每个块级元素占一行 -->
<view style="border: 1px solid #f00;">块级元素1</view>
<!-- 块级元素的宽度等于父级元素的宽度减去内外边距的宽度 -->
<view style="border: 1px solid #0f0;margin: 15px;padding: 20px;">块级元素2</view>
<!-- 块级元素的宽度,高度自定义设置 -->
<view style="border: 1px solid #00f;width: 200px;height: 80px;">块级元素3</view>
<!-- 块级元素的高度随内容决定,内容为块级元素 -->
<view style="border: 1px solid #ccc;">
<view style="height: 60px;">块级元素4</view>
</view>
<!-- 块级元素的高度随内容决定,内容为文本元素,块级元素的高度为100px -->
<view style="border: 1px solid #f00;width: 100px;background-color: #ccc;">父级元素高度随内容决定,内容为文本</view>
显示效果:
3.2.2 行内元素
行内元素, 不必从新一行开始, 通常会与前后的其他行内元素显示在同一行中, 它们不占有独立的区域, 仅靠自身内容支撑结构, 一般不可以设置大小, 常用于控制页面中文本的样式。 将一个元素的display 属性设置为inline 后, 该元素即被设置为行内元素。 行内元素的特点如下:
(1) 行内元素不能被设置高度和宽度, 其高度和宽度由内容决定。
(2) 行内元素内不能放置块级元素, 只级容纳文本或其他行内元素。
(3) 同一块内, 行内元素和其他行内元素显示在同一行。
< text/ > 组件默认为行内元素, 使用< view/ > 及< text/ > 组件演示盒子模型及行内元素的示例代码如下:
<view style="padding:20px">
<text style="border: 1px solid #f00;">文本1</text>
<text style="border: 1px solid #0f0;margin: 10px;padding: 5px;">文本2</text>
<view style="border: 1px solid #00f;display: inline;">块级元素设置为行内元素</view>一行显示不全,自动换行显示
</view>
显示效果:
3.2.3 行内块元素
当元素的display 属性被设置为inline - block 时, 元素被设置为行内块元素。 行内块元素可以被设置高度、宽度、内边距和外边距。 示例代码如下:
<view>
元素显示方式的<view style="display:inline-block;border: 1px solid #f00;margin: 10px;padding: 10px;width: 200px;">块级元素,行内元素的行内块元素</view>三种类型
</view>
显示效果:
3.3 浮动与定位
3.3.1 元素浮动与清除
元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制, 移到其父元素中指定位置的过程。 在CSS 中, 通过float 属性来定义浮动, 其基本格式如下:
{float:none |left |right;}
right———元素向右浮动
示例代码,分别对box1,box2,box3元素左浮动
<view>box1,box2,box3 没浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="border: 1px solid rgb(0, 255, 106);">box1</view>
<view style="border: 1px solid rgb(89, 0, 255);">box2</view>
<view style="border: 1px solid rgb(234, 0, 255);">box3</view>
</view>
<view>box1左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left;border: 1px solid rgb(0, 255, 106);">box1</view>
<view style="border: 1px solid rgb(89, 0, 255);">box2</view>
<view style="border: 1px solid rgb(234, 0, 255);">box3</view>
</view>
<view>box1,box2左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left;border: 1px solid rgb(0, 255, 106);">box1</view>
<view style="float: left;border: 1px solid rgb(89, 0, 255);">box2</view>
<view style="border: 1px solid rgb(234, 0, 255);">box3</view>
</view>
<view>box1,box2,box3左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left;border: 1px solid rgb(0, 255, 106);">box1</view>
<view style="float: left;border: 1px solid rgb(89, 0, 255);">box2</view>
<view style="float: left;border: 1px solid rgb(234, 0, 255);">box3</view>
</view>
效果如图:
在CSS 中, clear 属性用于清除浮动元素对其他元素的影响, 其基本格式如下:
{clear:left | right | both | none}
代码示例:
<view>box1,box2左浮动,box3清除左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left;border: 1px solid rgb(0, 255, 106);">box1</view>
<view style="float: left;border: 1px solid rgb(89, 0, 255);">box2</view>
<view style="clear: left;border: 1px solid rgb(234, 0, 255);">box3</view>
</view>
效果如图:
另外,还可以在父元素外添加一个空元素,实现父元素包裹浮动元素
代码如下:
.wxml
<view>box1,box2,box3左浮动,在父元素后添加一个空元素</view>
<view style="border: 1px solid #f00;padding: 5px;" class="clear-folat">
<view style="float: left;border: 1px solid rgb(0, 255, 106);">box1</view>
<view style="float: left;border: 1px solid rgb(89, 0, 255);">box2</view>
<view style="float: left;border: 1px solid rgb(234, 0, 255);">box3</view>
</view>
.wxss
.clear-folat ::after{
display: block;
clear: both;
height: 0;
content: "";
}
效果如图:
3.3.2 元素定位
浮动布局虽然灵活, 但无法对元素的位置进行精确的控制。 在CSS 中, 通过position 属性可以实现对页面元素的精确定位。
{position:static | relative | absolute | fixed}
static———默认值, 该元素按照标准流进行布局;
relative———相对定位, 相对于它在原文档流的位置进行定位, 它后面的盒子仍以标准流方式对待它;
absolute———绝对定位, 相对于其上一个已经定位的父元素进行定位, 绝对定位的盒子从标准流中脱离, 它对其后的兄弟盒子的定位没有影响;
fixed———固定定位, 相对于浏览器窗口进行定位;
对box1,box2,box3进行元素静态定位:
<!-- 三个元素均未定位 -->
<view style="border: 1px solid rgb(0, 255, 106);width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid rgb(89, 0, 255);width: 100px;height: 100px;">box2</view>
<view style="border: 1px solid rgb(234, 0, 255);width: 100px;height: 100px;">box3</view>
效果如图:
对box2进行元素相对定位:
<!-- box2元素相对定位 relative top:30px left:30px -->
<view style="border: 1px solid rgb(0, 255, 106);width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid rgb(89, 0, 255);width: 100px;height: 100px;position: relative;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid rgb(234, 0, 255);width: 100px;height: 100px;">box3</view>
效果如图:
对box2进行元素绝对定位:
<!-- box2元素绝对定位 relative top:30px left:30px -->
<view style="border: 1px solid rgb(0, 255, 106);width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid rgb(89, 0, 255);width: 100px;height: 100px;position:absolute;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid rgb(234, 0, 255);width: 100px;height: 100px;">box3</view>
效果如图:
对box2进行元素固定定位:
<!-- box2元素固定定位 fixed top:60px left:30px -->
<view style="border: 1px solid rgb(0, 255, 106);width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid rgb(89, 0, 255);width: 100px;height: 100px;position:fixed;left:30px;top: 30px;">box2</view>
<view style="border: 1px solid rgb(234, 0, 255);width: 100px;height: 100px;">box3</view>
效果如图:
通过例子我们发现,绝对定位和固定定位的效果相同,这是因为它们的父元素是Page,没有定位。
将,box1,box2,box3的父元素采用相对定位,将box2采用绝对定位,代码如下:
<!-- box1,box2,box3的父元素采用相对,box2元素绝对定位 -->
<view style="position: relative;top: 50px;left: 50px;border: 1px solid #00f;">
<view style="border: 1px solid rgb(0, 255, 106);width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid rgb(89, 0, 255);width: 100px;height: 100px;position:absolute;left:30px;top: 30px;">box2</view>
<view style="border: 1px solid rgb(234, 0, 255);width: 100px;height: 100px;">box3</view>
</view>
效果如图:
box1,box2,box3的父元素采用相对,box2元素固定定位 ,代码如下:
<!-- box1,box2,box3的父元素采用相对,box2元素固定定位 -->
<view style="position: relative;top: 50px;left: 50px;border: 1px solid #00f;">
<view style="border: 1px solid rgb(0, 255, 106);width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid rgb(89, 0, 255);width: 100px;height: 100px;position:fixed;left:30px;top: 30px;">box2</view>
<view style="border: 1px solid rgb(234, 0, 255);width: 100px;height: 100px;">box3</view>
</view>
效果如图:
3.4 fiex布局
flex 布局是万维网联盟(World Wide Web Consortium, W3C) 在2009 年提出的一种新布局方案, 该布局可以简单快速地完成各种可以伸缩的设计, 以便很好地支持响应式布局。flex 是flexible box 的缩写, 意为弹性盒子模型, 可以简便、完整、响应式地实现各种页面布局。
容器默认存在两根轴: 水平的主轴(main axis) 和垂直的交叉轴(cross axis)。 主轴的开始位置(与边框的交叉点) 叫做main start, 结束位置叫做main end; 交叉轴的开始位置叫做cross start, 结束位置叫做cross end。
项目默认沿主轴排列。 单个项目占据的主轴空间叫做main size, 占据的交叉轴空间叫做cross size。
3.4.1 容器属性
fiex容器支持的属性有7种:
1. display
display用来指定元素是否为flex布局,语法格式如下:
.box{
display:flex | inline-flex
}
flex——块级flex布局,改元素变为弹性布局;
inline-flex——行内flex布局,行内容器符合行内元素的特征,同时在容器内又符合flex布局规范。
设置了flex布局之后,子元素的float,clear和vertical-align属性将失效。
2. flex-direction
flex-direction用于设置主轴的方向,即项目排列的方向,语法格式如下:
.box{
flex-direction:row | row-reverse | column | column-recerse
}
(a)row——主轴为水平方向,起点在左端,当元素设置为flex布局时,主轴默认为row;
(b)row - reverse———主轴为水平方向, 起点在右端;
(c)column———主轴为垂直方向, 起点在顶端;
(d)column - reverse———主轴为垂直方向, 起点在底端;
3. flex-wrap
flex -wrap 用来指定当项目在一根轴线的排列位置不够时, 项目是否换行, 其语法格式如下:
.box{
flex-wrap:nowrap | wrap | wrap-reverse:
}
![](https://i-blog.csdnimg.cn/blog_migrate/1027f1a64613f6dd49086bb9b626b1fa.png)
.box{flex-flow:row nowrap;} //水平方向不换行
box{flex-flow:row-reverse wrap;} //水平方向逆方向换行
box{flex-flow:column wrap-reverse;} //垂直方向逆方向换行
5. justify-content
justify - content 用于定义项目在主轴上的对齐方式。 语法格式如下:
.box{justify-content:flex-start | flex-end | center | space-between | space-around;}
![](https://i-blog.csdnimg.cn/blog_migrate/0c7292a4df2a92dc4d9a5e527d311e45.png)
.box{align-items:flex-start | flex-end | center | baseline | stretch;}
//.wxml
<view class="cont1">
<view class="item">1</view>
<view class="item item2">2</view>
<view class="item item3">3</view>
<view class="item item4">4</view>
</view>
//.wxss
.cont1{
display: flex;
flex-direction: row;
align-items: baseline;
}
.item{
background-color: #ccc;
border: 1px solid #f00;
height: 100px;
width: 50px;
margin: 2px;
}
.item2{
height: 80px;
}
.item3{
display: flex;
height: 50px;
align-items: flex-end;
}
.item4{
height: 120px;
}
效果如图:
![](https://i-blog.csdnimg.cn/blog_migrate/99ac4a3aefa36b5108ce2d1dcc8e9856.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5f24f7e6b67390c4aa00fe9317f55962.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1aa11fd693966cfce6460f6ee43a4aa6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2e1084a89137c0060b6af7b91e0337fb.png)
![](https://i-blog.csdnimg.cn/blog_migrate/77ab5db2a8174891bf3254ed38a85f06.png)
.box{
align-content:flex-start | fled-end | center | space-between | space-around | stretch
}
![](https://i-blog.csdnimg.cn/blog_migrate/cb645280b61cba2bcdf001c38cfc80fe.png)
3.4.2 项目属性
容器内的项目支持6 个属性:
1.ordex
order 属性定义项目的排列顺序, 数值越小, 排列越靠前, 默认值为0
.item{order:<number>}
示例代码如下:
//.wxml
<view class="cont1">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
<view class="item">4</view>
</view>
<view>order默认为0</view>
<view class="cont1">
<view class="item" style="order: 1;">1</view>
<view class="item" style="order: 2;">2</view>
<view class="item" style="order: 3;">3</view>
<view class="item">4</view>
</view>
<view>order:0 order:1 order:2 order:3</view>
//wxss
.cont1{
display: flex;
flex-direction: row;
align-items: stretch;
}
.item{
background-color: #ccc;
border: 1px solid #f00;
height: 100px;
width: 50px;
margin: 2px;
}
.item2{
height: 80px;
}
.item3{
display: flex;
height: 50px;
align-items: stretch;
}
.item4{
height: 120px;
}
效果如图:
2. flex-grow
flex - grow 定义项目的放大比例, 默认值为0, 即不放大。 语法格式如下:
.item{flex-grow:<number>;}
示例代码如下:
//wxml
<view class="cont1">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
<view class="item">4</view>
</view>
<view class="cont1">
<view class="item">1</view>
<view class="item" style="flex-grow: 1;">2</view>
<view class="item" style="flex-grow: 2;">3</view>
<view class="item">4</view>
</view>
//wxss
.cont1{
display: flex;
flex-direction: row;
align-items: stretch;
}
.item{
background-color: #ccc;
border: 1px solid #f00;
height: 100px;
width: 50px;
margin: 2px;
}
.item2{
height: 80px;
}
.item3{
display: flex;
height: 50px;
align-items: stretch;
}
.item4{
height: 120px;
}
效果如图:
3. flex-shrink
flex - shrink 用来定义项目的缩小比例, 默认值为1, 如果空间不足, 该项目将被缩小。
.item{flex-shrink:<number>;}
代码如下:
//wxml
<view class="cont1">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
<view class="item">4</view>
</view>
<view class="cont1">
<view class="item">1</view>
<view class="item" style="flex-shrink: 2">2</view>
<view class="item" style="flex-shrink: 1">3</view>
<view class="item" style="flex-shrink: 4">4</view>
</view>
//wxss
.cont1{
display: flex;
flex-direction: row;
align-items: stretch;
}
.item{
background-color: #ccc;
border: 1px solid #f00;
height: 100px;
width: 240px;
margin: 2px;
}
.item2{
height: 80px;
}
.item3{
display: flex;
height: 50px;
align-items: stretch;
}
.item4{
height: 120px;
}
效果如图:
4. flex-basis
flex - basis 属性用来定义伸缩项目的基准值, 剩余的空间将按比例进行缩放, 它的默认值为auto (即项目的本来大小)。 语法格式如下:
.item{flex-basis:<number> | auto;}
示例代码如下:
//wxml
<view class="cont1">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
<view class="item">4</view>
</view>
<view class="cont1">
<view class="item">1</view>
<view class="item" style="flex-basis:100px;">2</view>
<view class="item" style="flex-basis: 200px;">3</view>
<view class="item">4</view>
</view>
//.cont1{
display: flex;
flex-direction: row;
align-items: stretch;
}
.item{
background-color: #ccc;
border: 1px solid #f00;
height: 100px;
width: 240px;
margin: 2px;
}
.item2{
height: 80px;
}
.item3{
display: flex;
height: 50px;
align-items: stretch;
}
.item4{
height: 120px;
}
效果如图:
5. flex
flex 属性是flex - grow、flex - shrink 和flex - basis 的简写, 其默认值分别为0、1、auto。语法格式如下:
.item{flex:<flex-grow> | <flex-shrink> | flex-basis;}
示例代码如下:
.item{flex:auto;}//等价于.item{flex:1 1 auto;}
.item{flex:none;}//等价于.item{flex:0 0 aoto;}
6. align-self
align - self 属性用来指定单独的伸缩项目在交叉轴上的对齐方式。 该属性会重写默认的对齐方式。 语法格式如下:
.item{align-self:auto|flex-start|flex-end|center|baseline|stretch;}