uni-app基础知识点

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

属性说明：

属性	类型	是否必填	描述
current	Number	是	当前激活的模式，list节点的索引值
list	Array	是	启动模式列表

list说明：

属性	类型	是否必填	描述
name	String	是	启动模式名称
path	String	是	启动页面路径
query	String	否	启动参数，可在页面的 onLoad 函数里获得

1.什么是uni-app

uni-app 是一个使用 Vue.js(opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

2.uni-app的优点

3.项目目录及开发规范

开发规范主要事遵循小程序的规范

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

页面文件遵循 Vue 单文件组件 (SFC) 规范(opens new window)
组件标签靠近小程序规范，详见uni-app 组件规范
接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
为兼容多端运行，建议使用flex布局进行开发

3.1.0.对css和js的引入

1.js的引入：

js文件或script标签内（包括 renderjs 等）引入js文件时，可以使用相对路径和绝对路径，形式如下

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录import add from '@/common/add.js';// 相对路径
import add from '../../common/add.js';

注意

js 文件不支持使用/开头的方式引入

2.css的引入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

<style>@import "../../common/uni.css";.uni-card {box-shadow: none;}
</style>

4.globalStyle全局配置（文件pages.json中配置）

5.对页面的配置

通过pages来配置页面

属性	类型	默认值	描述
path	String		配置页面路径
style	Object		配置页面窗口表现，配置项参考 pageStyle

pages数组数组中第一项表示应用启动页

注意：这里和路由不一样，想要显示页面，就要在pages.json中配置路径；

想要h5页面能够显示下拉刷新的效果，可以单独配置；

tops：

配置pages.json页面中的选项时，最后一个配置后面不能带“ ，”---否则会报错

       "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path":"./pages/message","style":{"navigationBarTitleText":"message pages~","backgroundColor":"#007AFF","navigationBarBackgroundColor":"#aaaa00","enablePullDownRefresh":true,"navigationBarTextStyle":"white","h5":{///单独配置h5页面的效果"pullToRefresh":{"color":"#007AFF"}}}},

6.配置tabBar

如果应用是一个多 tab (界面/页面)应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

Tips

当设置 position 为 top 时，将不会显示 icon（图片配置标签）
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

属性说明：

属性	类型	必填	默认值	描述	平台差异说明
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar 上边框的颜色，仅支持 black/white	App 2.3.4+ 支持其他颜色值
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position	String	否	bottom	可选值 bottom、top	top 值仅微信小程序支持

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片，不支持字体图标
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

案例代码：

"tabBar": {"color":"#555500","selectedColor":"#007AFF","backgroundColor":"#aaff7f","borderStyle":"#a5a5a5","list": [{"text": "首页","pagePath":"pages/index/index",注意目录前面没有“./”"iconPath":"static/tabs/home.png","selectedIconPath":"static/tabs/home-active.png"},{"text": "信息","pagePath":"pages/message/message","iconPath":"static/tabs/message.png","selectedIconPath":"static/tabs/message-active.png"},{"text": "我们","pagePath":"pages/contact/contact","iconPath":"static/tabs/contact.png","selectedIconPath":"static/tabs/contact-active.png"}]}

7.condtion的启动模式配置

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

注意这个属性和与tabBar平级

属性说明：

属性	类型	是否必填	描述
current	Number	是	当前激活的模式，list节点的索引值
list	Array	是	启动模式列表

list说明：

属性	类型	是否必填	描述
name	String	是	启动模式名称
path	String	是	启动页面路径
query	String	否	启动参数，可在页面的 onLoad 函数里获得

"condition":{"current": 0,"list":[{"name":"详情页","path":"pages/datil","query":"123"}]}

效果就会出现详情页来显示我们设置的特定组件：

8.text文本组件

-------------样例：<text></text>

属性	类型	默认值	必填	说明
selectable	boolean	false	否	文本是否可选
space	string	.	否	显示连续空格，可选参数：`ensp`、`emsp`、`nbsp`（按世界文字大小显示空格）
decode	boolean	false	否	是否解码

text 组件相当于行内标签、在同一行显示，可以使用<view>换行
除了文本节点以外的其他节点都无法长按选中

<view><!-- 长按文本是否可选 --><text selectable='true'>来了老弟</text>
</view><view><!-- 显示连续空格的方式 --><view><text space='ensp'>来了  老弟</text></view>//ensp显示中文空格一般的大小<view><text space='emsp'>来了  老弟</text></view>//显示的和中文空格一样<view><text space='nbsp'>来了  老弟</text></view>
</view><view><text>skyblue</text>
</view><view><!-- 是否解码 --><text decode='true'>&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;</text>
</view>

9.view组件

View 视图容器，类似于 HTML 中的 div

属性说明

属性名	类型	默认值	说明
hover-class	String	none	指定按下去（移动端）的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	Boolean	false	阻止冒泡，{App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）}
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

:hover-start-time="2000"-----注意这里的“2000”本来是字符串，加上“：”后就可被识别为数组；

<view class="box2" hover-class="box2_active"><view class='box1' hover-class='active' hover-stop-propagation :hover-start-time="2000" :hover-stay-time='2000'></view>
</view>

10.button按钮组件

属性名	类型	默认值	说明
size	String	default mini（小）、default	按钮的大小
type	String	default primary（看在哪运行）、default（白）、warn（红）	按钮的样式类型
plain （英文：无装饰的）	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否被禁用
loading	Boolean	false	名称是否带 loading t图标

button 组件默认独占一行，设置 size 为 mini 时可以在一行显示多个

<button size='mini' type='primary'>前端</button><button size='mini' type='default' disabled='true'>前端</button><button size='mini' type='warn' loading='true'>前端</button>

11.image组件

属性名

类型

默认值

说明

平台差异说明

src

String

图片资源地址

mode

String

'scaleToFill'
（scaleToFill--宽高拉满至默认值）

（aspectFit--保持横纵比&使短边显示出来）

图片裁剪、缩放的模式

Tips

<image> 组件默认宽度 300px、高度 225px；
src 仅支持相对路径、绝对路径，支持 base64 码；
页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。

12.uni-app中的样式

1. rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。

2. 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束

/@import url("./static/font/iconfont.css");（且想要引用这个资源必须用 lang=“scss”）

3. 支持基本常用的选择器class、id、element等

4. 在 uni-app 中不能使用 * 选择器。

5. page 相当于 body 节点

6. 定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。

7. uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：

字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式；
字体文件大于等于 40kb，需开发者自己转换，否则使用将不生效；
字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。（在csss里的引用：绝对路径）

例如：'~@/static/iconfont.ttf'

 @font-face {font-family: test1-icon;src: url('~@/static/iconfont.ttf');}

13.数据的绑定：

在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可

export default {data () {return {msg: 'hello-uni'}}
}

插值表达式的使用

1. 利用插值表达式渲染基本数据

<view>{{msg}}</view>

2. 在插值表达式中使用三元运算

<view>{{ flag ? '我是真的':'我是假的' }}</view>

3.基本运算

<view>{{1+1}}</view>

14.v-bind/v-for

在data中定义了一张图片，我们希望把这张图片渲染到页面上

export default {data () {return {img: 'http://destiny001.gitee.io/image/monkey_02.jpg'}}
}

1.利用v-bind进行渲染

<image v-bind:src="img"></image>

还可以缩写成:

<image :src="img"></image>

2.v-for的使用

data中定以一个数组，最终将数组渲染到页面上

data () {return {arr: [{ name: '刘能', age: 29 },{ name: '赵四', age: 39 },{ name: '宋小宝', age: 49 },{ name: '小沈阳', age: 59 }]}
}

利用v-for进行循环

<view v-for="(item,i) in arr" :key="i">名字：{{item.name}}---年龄：{{item.age}}</view>

15.注册事件传递的参数

1.事件绑定

在uni中事件绑定和vue中是一样的，通过v-on进行事件的绑定，也可以简写为@

<button @click="tapHandle">点我啊</button>

事件函数定义在methods中

methods: {tapHandle () {console.log('真的点我了')}
}

2.事件传参

默认如果没有传递参数，事件函数第一个形参为事件对象

// template
<button @click="tapHandle">点我啊</button>
// script
methods: {tapHandle (e) {console.log(e)}
}

如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据

// template
<button @click="tapHandle(1)">点我啊</button>
// script
methods: {tapHandle (num) {console.log(num)}
}

如果获取事件对象也想传递参数

// template
<button @click="tapHandle(1,$event)">点我啊</button>
// script
methods: {tapHandle (num,e) {console.log(num,e)}
}

16.uni的生命周期

1.应用的生命周期（写在App.vue中）

生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。

生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数

uni-app 支持如下应用生命周期函数：

函数名	说明
onLaunch	当`uni-app` 初始化完成时触发（全局只触发一次）
onShow	当 `uni-app` 启动，或从后台进入前台显示
onHide	当 `uni-app` 从前台进入后台
onError	当 `uni-app` 报错时触发

2.页面的生命周期（写在每一个组件中）

onload 监听加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），

onShow 监听页面显示。页面每次出现在屏幕上都触发
onReady 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide 监听页面隐藏
onUnload 监听页面卸载

注意页面的加载一次之后，会进入缓存区，再次进入时不会触发onload

注意这里生命周期和method同级；

17.下拉刷新

1.开启下拉刷新

在uni-app中有两种方式开启下拉刷新

需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
通过调用uni.startPullDownRefresh方法来开启下拉刷新

1.1通过配置文件开启

创建list页面进行演示

<template><view>杭州学科<view v-for="(item,index) in arr" :key="index">{{item}}</view></view>
</template><script>export default {data () {return {arr: ['前端','java','ui','大数据']}}}
</script><style>
</style>

通过pages.json文件中找到当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh

{"path":"pages/list/list","style":{"enablePullDownRefresh": true}
}

1.2通过API开启

uni.startPullDownRefresh()

2.监听下拉刷新

通过onPullDownRefresh可以监听到下拉刷新的动作

onPullDownRefresh是另一个生命周期函数；

export default {data () {return {arr: ['前端','java','ui','大数据']}},methods: {startPull () {uni.startPullDownRefresh()}},onPullDownRefresh () {console.log('触发下拉刷新了')}
}

3.关闭下拉刷新

uni.stopPullDownRefresh()

停止当前页面下拉刷新。

<template><view><button type="primary" @click="startPull">开启下拉刷新</button>杭州学科<view v-for="(item,index) in arr" :key="index">{{item}}</view></view>
</template>
<script>export default {data () {return {arr: ['前端','java','ui','大数据']}},methods: {startPull () {uni.startPullDownRefresh()}},onPullDownRefresh () {this.arr = []setTimeout(()=> {this.arr = ['前端','java','ui','大数据']uni.stopPullDownRefresh()这就属于调用API来关闭下拉刷新}, 1000);}}
</script>

18.上拉加载（由下向上拉动）

上拉加载通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px

通过onReachBottom监听到触底的行为

onReachBootom---也是一个生命周期函数

<template><view><button type="primary" @click="startPull">开启下拉刷新</button>杭州学科<view v-for="(item,index) in arr" :key="index">{{item}}</view></view>
</template>
<script>export default {data () {return {arr: ['前端','java','ui','大数据','前端','java','ui','大数据']}},onReachBottom () {console.log('触底了')this.list = [...this.list,...["JAVA","UI","etc"]]每当页面加载到底部就会拼接上【“Java”，“UI”，“etc”】然后在显示出来；}}
</script><style>view{height: 100px;line-height: 100px;}
</style>

注意这里对文中“...this.list，...[]”的用法：

iClick3() { let iArray = ['1', '2', '3']; console.log(['0', ...iArray, '4']); // 打印结果 ["0", "1", "2", "3", "4"] }

19.发送get请求

<template><view><button @click="sendGet">发送请求</button></view>
</template>
<script>export default {methods: {sendGet () {uni.request({///调用uni的API；url: 'http://localhost:8082/api/getlunbo',//注意这里的地址要加上协议；success(res) {console.log(res)}})}}}
</script>

20.数据的缓存

1.uni.setStorage

官方文档

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

<template><view><button type="primary" @click="setStor">存储数据</button></view>
</template><script>export default {methods: {setStor () {uni.setStorage({key: 'id',data: 100,success () {console.log('存储成功')}})}}}
</script><style>
</style>

2.uni.setStorageSync

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

代码演示

<template><view><button type="primary" @click="setStor">存储数据</button></view>
</template><script>export default {methods: {setStor () {uni.setStorageSync('id',100)}}}
</script><style>
</style>

3.uni.getStorage

从本地缓存中异步获取指定 key 对应的内容。

代码演示

<template><view><button type="primary" @click="getStorage">获取数据</button></view>
</template>
<script>export default {data () {return {id: ''}},methods: {getStorage () {uni.getStorage({key: 'id',success:  res=>{this.id = res.data}})}}}
</script>

4.uni.getStorageSync

从本地缓存中同步获取指定 key 对应的内容。

代码演示

<template><view><button type="primary" @click="getStorage">获取数据</button></view>
</template>
<script>export default {methods: {getStorage () {const id = uni.getStorageSync('id')console.log(id)}}}
</script>

5.uni.removeStorage

从本地缓存中异步移除指定 key。

代码演示

<template><view><button type="primary" @click="removeStorage">删除数据</button></view>
</template>
<script>export default {methods: {removeStorage () {uni.removeStorage({key: 'id',success: function () {console.log('删除成功')}})}}}
</script>

6.uni.removeStorageSync

从本地缓存中同步移除指定 key。

代码演示

<template><view><button type="primary" @click="removeStorage">删除数据</button></view>
</template>
<script>export default {methods: {removeStorage () {uni.removeStorageSync('id')}}}
</script>

21.图片的上传和预览

1.上传图片

uni.chooseImage方法从本地相册选择图片或使用相机拍照。

///注意例子中的this指向问题，下面的this指向是vuecomperment，而我们要的数据在回调函数的参数res中；

<template><view><button @click="chooseImg" type="primary">上传图片</button><view><image v-for="item in imgArr" :src="item" :key="index"></image></view></view>
</template><script>export default {data () {return {imgArr: []}},methods: {chooseImg () {uni.chooseImage({count: 9,success: res=>{注意这里this指向问题；this.imgArr = res.tempFilePaths}})}}}
</script>

2.预览图片

结构

<view><image v-for="item in imgArr" :src="item" @click="previewImg(item)" :key="item"></image>
</view>

预览图片的方法

previewImg (current) {///接收传递过来的参数item：uni.previewImage({urls: this.imgArr,current})
}

22.条件编译/注释，跨段兼容

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法：以 #ifdef 加平台标识开头，以 #endif 结尾。

平台标识

值	平台	参考文档
APP-PLUS	5+App	HTML5+ 规范
H5	H5
MP-WEIXIN	微信小程序	微信小程序
MP-ALIPAY	支付宝小程序	支付宝小程序
MP-BAIDU	百度小程序	百度小程序
MP-TOUTIAO	头条小程序	头条小程序
MP-QQ	QQ小程序	（目前仅cli版支持）
MP	微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序

1.组件的条件注释

代码演示

<!-- #ifdef H5 -->
<view>h5页面会显示
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>微信小程序会显示
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view>app会显示
</view>
<!-- #endif -->

2.api的条件注释

代码演示

onLoad () {//#ifdef MP-WEIXINconsole.log('微信小程序')//#endif//#ifdef H5console.log('h5页面')//#endif
}

样式的条件注释

代码演示

/* #ifdef H5 */
view{height: 100px;line-height: 100px;background: red;
}
/* #endif */
/* #ifdef MP-WEIXIN */
view{height: 100px;line-height: 100px;background: green;
}
/* #endif */

23.两种方式导跳转和传参

1.利用navigator进行跳转

navigator详细文档：文档地址

///注意下面的都是包含在nabigator下的标签，才能跳转

跳转到普通页面

<navigator url="/pages/about/about" hover-class="navigator-hover"><button type="default">跳转到关于页面</button>
</navigator>

跳转到tabbar页面

open-type="switchTab"

<navigator url="/pages/message/message" open-type="switchTab"><button type="default">跳转到message页面</button>
</navigator>

2.利用编程式导航进行跳转

导航跳转文档

1).利用navigateTo进行导航跳转

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

<button type="primary" @click="goAbout">跳转到关于页面</button>

通过navigateTo方法进行跳转到普通页面

goAbout () {uni.navigateTo({url: '/pages/about/about',})
}

2).通过switchTab跳转到tabbar页面

跳转到tabbar页面

<button type="primary" @click="goMessage">跳转到message页面</button>

通过switchTab方法进行跳转

goMessage () {uni.switchTab({url: '/pages/message/message'})
}

3).redirectTo进行跳转

关闭当前页面，跳转到应用内的某个页面。

<!-- template -->
<button type="primary" @click="goMessage">跳转到message页面</button>
<!-- js -->
goMessage () {uni.switchTab({url: '/pages/message/message'})
}

3.导航跳转传递参数

在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收

传递参数的页面

goAbout () {uni.navigateTo({url: '/pages/about/about?id=80',});
}

接收参数的页面

<script>export default {onLoad (options) {console.log(options)}}
</script>

24.组建的创建,使用和生命周期

1.组建的创建使用：

在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可

创建login组件，在component中创建login目录，然后新建login.vue文件

<template><view>这是一个自定义组件</view>
</template><script>
</script><style>
</style>

在其他组件中导入该组件并注册

import login from "@/components/test/test.vue"///login是给这个组件起别名，

注册组件

components: {test}

使用组件

<test></test>

2.组件的生命周期函数

beforeCreate	在实例初始化之后被调用。详见
created	在实例创建完成后被立即调用。详见
beforeMount	在挂载开始之前被调用。详见
mounted	挂载到实例上去之后调用。详见注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用`$nextTick` Vue官方文档
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

25.组件间传值的方式

1.父组件给子组件传值

通过props来接受外界传递到组件内部的值

<template><view>这是一个自定义组件 {{msg}}</view>
</template><script>export default {props: ['msg']}
</script><style>
</style>

其他组件在使用login组件的时候传递值

///注意传值的自定义属性要写在子组件上；（这里的子组件就是test）

<template><view><test :msg="msg"></test></view>
</template><script>import test from "@/components/test/test.vue"export default {data () {return {msg: 'hello'}},components: {test}}
</script>

2.子组件给父组件传值

通过$emit触发事件进行传递参数

<template><view>这是一个自定义组件 {{msg}}<button type="primary" @click="sendMsg">给父组件传值</button></view>
</template><script>export default {data () {return {status: '打篮球'}},props: {msg: {type: String,value: ''}},methods: {sendMsg () {this.$emit('myEvent',this.status)}}}
</script>

父组件定义自定义事件并接收参数

注意这里的自定义事件也是写在子组件下，这里的函数就算接收参数，也可以不写括号；

//在method中定义函数接收参数时括号里必须时“res”

<template><view><test :msg="msg" @myEvent="getMsg"></test></view>
</template>
<script>import test from "@/components/test/test.vue"export default {data () {return {msg: 'hello'}},methods: {getMsg (res) {console.log(res)}},components: {test}}
</script>

26.组件的使用

1.uni-ui的使用

uni-ui文档

1、进入Grid宫格组件

2、使用HBuilderX导入该组件

3、导入该组件

import uniGrid from "@/components/uni-grid/uni-grid.vue"
import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"

4、注册组件

components: {uniGrid,uniGridItem}

5、使用组件

<uni-grid :column="3"><uni-grid-item><text class="text">文本</text></uni-grid-item><uni-grid-item><text class="text">文本</text></uni-grid-item><uni-grid-item><text class="text">文本</text></uni-grid-item>
</uni-grid>

27.flex布局

Flex 布局教程：语法篇 - 阮一峰的网络日志

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性

任何一个容器都可以指定为 Flex 布局。

.box{ display: flex; }

行内元素也可以使用 Flex 布局。

.box{ display: inline-flex; }

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{ display: -webkit-flex; /* Safari */ display: flex; }

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

1.flex布局的基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

2.容器的属性

2.1.0.flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

2.1.flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）

它可能有4个值。

row（默认值）：	主轴为水平方向，起点在左端。
row-reverse：	主轴为水平方向，起点在右端。
column：	主轴为垂直方向，起点在上沿。
column-reverse：	主轴为垂直方向，起点在下沿。

2.2.flex-wrap

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

nowrap	（默认）：不换行。
wrap	：换行，第一行在上方。
wrap-reverse	：换行，第一行在下方。

2.3.justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

下面为属性的取值和效果：

2.4.align-items属性

下面为图片的属性和效果：

2.项目的属性

--------里面一个个的小盒子的属性

order	属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow	属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink	flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis	flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex	flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self	align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。