Uniapp学习笔记

form表单

表单，将组件内的用户输入的<switch> <input> <checkbox> <slider> <radio> <picker> 提交。

当点击 <form> 表单中 formType 为 submit 的 <button> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

event.detail = {value : {'name': 'value'} , formId: ''}

1.表单组件要加name

2.form组件加@submit=“methods”,方法返回提交的对象

3.button加formtype：submit。

3.methods(e) console.log(e);

子组件props为组件动态传参    ！

1.子组件中与data同级，props数组中写标签中要绑定的值。（调用子组件的是父组件）

父向子传值

 父组件在调用组件时，在组件的标签中传入参数，传到了子组件的。

2.动态传参

将js中的值，动态绑定到组件中。

 :title=""

3.不传值也能显示默认值：

写成对象，type是用于传参校验的

 数组和对象要写default（）和return

4.子向父传参

在子组件获取值的地方，绑定一个@监听器，定义的函数中使用

，即将后面的参数传给前面的函数。

父组件中

，在绑定的onmyeve函数中就能拿到传递的数据了。

5.自定义组件中不能直接使用原生事件，必须加native属性

页面跳转

法1. navigator标签

法2. 给盒子加个函数，使用 

1.uni.navigateto( { url } )。跳转后可返回

2.uniredirectto ，跳转后不能返回

3.unirelaunch，4.uniswitchtab。都能跳转导航栏里的界面，前两个不能

5.uninavigateback：返回上一界面，用于自定义返回。

123路径后都能带参数，参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；

如： 'path?key=value&key2=value2'，path为下一个页面的路径。（格式不一定）

获取url中的参数：

下一个页面的onLoad函数可得到传递的参数。

onload(e){...}，与data平级。

onLoad 的参数是其他页面打开当前页面所传递的数据。

在其他路径写跳转url时，加入传递的参数

API

1.uni.showToast 

显示消息提示框

unishowToast({ obj参数 })

2.uni.showLoading

显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。

3.uni.showModal

显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。

4.uni.setNavigationBarColor  uni.setNavigationBarTitle 

动态设置tabbar

5.uni.hideTabbar, uni.showTabbar

隐藏，显示

6.uni.request({ })

网络请求

 url,data,success,fail,complete

动态修改url中的参数时：

url: `...../$参数/.....`,  其他不变

7.数据缓存：storage

一般用sync同步的

在任何界面都能调用缓存的数据

组件

1. view：适用于小程序和h5的无意标签，就是div。是块标签 

2. 使用v-html指令可以解析js中的html语句，并在小程序中展示出来

3. text：文本组件，包含文本，就是span，是行标签。（文本选中）

4. scroll-view：滚动组件。使用横向滚动时，需要给<scroll-view>添加 white-space: nowrap;样式。用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height； 

5. swiper：轮播图。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。需要给swiper设置宽高。

6. image：图片。mode：图片裁剪、缩放的模式（等比裁剪aspectFill）

7. navigator：跳转。里面可包含图片、按钮等。opentype：relanuch/navigator to

8. tabbar：page.json配置，导航栏。list里放对象。

9. input：输入。placeholder：输入为空的占位符，type：text、number、idcard。@input=”“,响应式获取输入的值

   

   

10. textarea：多行输入。

11. button： type：primary。formtype：submit/reset，会自动调用form组件的submit/reset函数。

12. picker：下方弹出的选择框，range：选项数组

13. h标签只在h5端有效，小程序端无效。

14. rpx为响应式像素，满屏为750*1334rpx

常用style属性

1. white-space:处理换行符和空格符.

2. display: block(元素为块级元素，前后换行) & inline-block(行内块元素)& flex

3. box-sizing：定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。border-box

4. margin：元素间距。margin-right：12rpx

5. padding：定义元素边框与元素内容之间的空间，即上右下左的内边距

6. border：边框线。颜色，大小，虚实。 border-radius:圆角边框

1. display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。

一般写到最外层盒子容器中

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

flex属性：flex：1，就是自动给你微调一下

flex-direction:元素排列方向

1. justify-content:  定义项目在主轴上的对齐方式

    属性值有

    flex-start（默认值）：左对齐

    flex-end：右对齐

    center：居中

    space-between：两端对齐，项目之间的间隔都相等。

    space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

     8.align-items（定义项目在竖直方向上对齐方式）

    属性值有：

    flex-start：交叉轴的起点对齐。（上对齐）

    flex-end：交叉轴的终点对齐。 （下对齐）

    center：交叉轴的中点对齐。

    baseline: 项目的第一行文字的基线对齐。

    stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

     9.line height  行高

     10.text align：文本对齐方式  start/ center/ end

     11.font-weight: bold; 加粗

动态添加的类写在原有类的里面 用&连接

display:flex(弹性盒子布局)详解-CSDN博客