uniapp学习二——组件（一）

view 基本容器

scroll-view   滑动组件

swiper   轮播图组件

match-media

类似于网页开发中使用媒体查询来适配大屏小屏，match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示。

    
        当页面最小宽度 375px， 页面宽度最大 800px 时显示
    
    
        当页面高度不小于 400px 且屏幕方向为横向时展示这里
    

movable-area 和 movable-view

movable-area指代可拖动的范围，在其中内嵌movable-view组件用于指示可拖动的区域。

即手指/鼠标按住movable-view拖动或双指缩放，但拖不出movable-area规定的范围。

当然也可以不拖动，而使用代码来触发movable-view在movable-area里的移动缩放。

	text

cover-view 覆盖在原生组件上的文本视图

rich-text 

富文本

表单

			
				
			
			
				+{{countryCode}}
				
				
				
			
			
			
				
				
				
			
			
				
				
			
			信息提交后，会有专员与您联系，帮助您更加顺利的完成加盟
			立即提交
		

formSubmit() {
				if (!this.hasLogin) {
					this.showLoginDialog = true;
					return
				}
				if (this.brandgrade == 1 || this.brandgrade == 2) {
					this.showbtipsdialog = true;
					return
				}
				const formData = this.submitdata;
				const rule = [
					{ name: "username", checkType: "string", checkRule: "0,20", errorMsg: "请输入姓名" },
					{ name: "jointype", checkType: "string", checkRule: "0,20", errorMsg: "请选择加盟类型" },
					{ name: "joincity", checkType: "string", checkRule: "0,20", errorMsg: "请选择代理城市" },
				]
				
				let checkRes = graceChecker.check(formData, rule);
				if(!checkRes) {
					this.$msg.toast(graceChecker.error);
					return;
				}
				let obj = {
					brandId: this.brandsId,
					joinUserName: this.submitdata.username,
					joinUserPhone: this.submitdata.usertel,
					city: this.submitdata.joincity,
					joinType: this.joinid,
				}
				submitjoin(obj).then(res => {
					uni.redirectTo({
					    url: '/pages/join/success'
					});
				})
				
			},

picker弹出框

picker-view

slider 滑块；     switch   开关选择器 ；   textarea   多行输入框

navigator

页面跳转

		跳转tab页面

媒体组件

 animation-view，audio，camera，image，video，live-player，live-pusher

地图组件

canvas 画布

web-view

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。

uniCloud客户端sdk

uniCloud分为客户端和云端两部分，有些接口名称相同，参数也相近，在此列举客户端sdk内可以使用的接口/属性，避免混淆

#API

uniCloud.importObject()    获取云对象引用以调用云对象接口 详情

扩展组件

数字角标，面包屑、日历、卡片、折叠面板、组合框、倒计时、数据选择器、级联选择器、下拉框、日期格式化、日期选择器、抽屉、

增强输入框、

悬浮按钮uni-fab

uni-file-picker ： 文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间

表单

#对齐方式

 label-position="top"

商品导航

客服，店铺、购物车、立即购买、加入购物车、立即购买

九宫格

滑动视图

	
		
			
				
				{{ item.text }}
			
		
	

分组、图标、索引列表、超链接、列表

	
		
		
		
		
		
		
		
		
		
		
		
		
			
				刚刚
				
				
			
		
	

加载更多 

自定义导航栏

通告栏、数字输入框、分页器、评分、

弹出层

打开弹窗

	Popup
	关闭