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同步的
在任何界面都能调用缓存的数据
组件
-
view:适用于小程序和h5的无意标签,就是div。是块标签
-
使用v-html指令可以解析js中的html语句,并在小程序中展示出来
-
text:文本组件,包含文本,就是span,是行标签。(文本选中)
-
scroll-view:滚动组件。使用横向滚动时,需要给<scroll-view>添加 white-space: nowrap;样式。用竖向滚动时,需要给 <scroll-view> 一个固定高度,通过 css 设置 height;
-
swiper:轮播图。swiper下的每个swiper-item是一个滑动切换区域,不能停留在2个滑动区域之间。需要给swiper设置宽高。
-
image:图片。mode:图片裁剪、缩放的模式(等比裁剪aspectFill)
-
navigator:跳转。里面可包含图片、按钮等。opentype:relanuch/navigator to
-
tabbar:page.json配置,导航栏。list里放对象。
-
input:输入。placeholder:输入为空的占位符,type:text、number、idcard。@input=”“,响应式获取输入的值
-
textarea:多行输入。
-
button: type:primary。formtype:submit/reset,会自动调用form组件的submit/reset函数。
-
picker:下方弹出的选择框,range:选项数组
-
h标签只在h5端有效,小程序端无效。
-
rpx为响应式像素,满屏为750*1334rpx
常用style属性
-
white-space:处理换行符和空格符.
-
display: block(元素为块级元素,前后换行) & inline-block(行内块元素)& flex
-
box-sizing:定义如何计算一个元素的总宽度和总高度,主要设置是否需要加上内边距(padding)和边框等。border-box
-
margin:元素间距。margin-right:12rpx
-
padding:定义元素边框与元素内容之间的空间,即上右下左的内边距
-
border:边框线。颜色,大小,虚实。 border-radius:圆角边框
-
display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。
一般写到最外层盒子容器中
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。
flex属性:flex:1,就是自动给你微调一下
flex-direction:元素排列方向
-
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; 加粗
动态添加的类写在原有类的里面 用&连接