https://uniapp.dcloud.io/component/

视图容器

• <view>

基本属性——主要用于指示按钮效果，经常用到的有hover-class="自定义css样式"，点击之后则可将view渲染为自定义样式放开之后再自动复原。

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

flex布局。view通常采用flex弹性布局，首先设置display，其次设置flex-direction，普通项目通常设置为：

	.content {
display: flex;//使用弹性布局
flex-direction: column;//纵向排列，横向为row
align-items: center;//居中排列
justify-content: center;//自适应大小
}

• <score-view>

 不同于<view>，使用该组件可以使区域滚动，但实际一般使用<list>，主要属性包括滚动方向的设置以及滚动触发的事件（其余属性可以查阅官网说明）：

属性名	类型	默认值	说明	平台差异说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
show-scrollbar	Boolean	false	控制是否出现滚动条	App-nvue 2.1.5+
@scrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
@scrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
@scroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

•  <swiper>

 

indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长	app-nvue不支持
circular	Boolean	false	是否采用衔接滑动，即播放到末尾后重新回到开头
@change	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current, source: source}
<swiper-item>			在<swiper>下使用，有属性item-id作为每个item的标识符

•  <metch-media>

metch-media作用就是自适应匹配屏幕大小，如图所示为效果图。

 

属性包括：

属性名	类型	默认值	必填	说明
min-width	number		否	页面最小宽度（ px 为单位）
max-width	number		否	页面最大宽度（ px 为单位）
width	number		否	页面宽度（ px 为单位）
min-height	number		否	页面最小高度（ px 为单位）
max-height	number		否	页面最大高度（ px 为单位）
height	number		否	页面高度（ px 为单位）
orientation	string		否	屏幕方向（ landscape 或 portrait ）

使用方法： 

<match-media :min-width="375" :max-width="800" >
<view>当页面最小宽度 375px， 页面宽度最大 800px 时显示</view>
</match-media>

• <movable-area>与<movable-view>

 movable-area指定了movable-view可移动的范围，二者必须一起使用，如图，蓝色部分可以看作为movable-view，灰色部分为规定的可移动区域movable-area，方块可在区域内以指定方式滑动。注意：movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动。

 movable-view常用属性：

属性名	类型	默认值	说明	平台差异说明
direction	String	none	movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia	Boolean	false	movable-view是否带有惯性	微信小程序、支付宝小程序、App、H5、百度小程序
out-of-bounds	Boolean	false	超过可移动区域后，movable-view是否还可以移动	微信小程序、支付宝小程序、App、H5、百度小程序
@change	EventHandle		拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）
@scale	EventHandle		缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}，	微信小程序、App、H5、百度小程序

•  <cover-view>与<cover-image>

覆盖在原生组件上的文本视图,可与cover-image嵌套如图则为覆盖在map上的一个图片。

 

cover-view有一个click响应事件

属性名	类型	默认值	说明	平台差异说明
scroll-top	number/string		设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效	微信小程序

 cover-image属性

属性名	类型	默认值	说明	平台差异说明
src	String		图标路径。支持本地路径、网络路径。不支持 base64 格式。
@load	eventhandle		图片加载成功时触发	微信小程序 2.1.0
@error	eventhandle		图片加载失败时触发	微信小程序 2.1.0

•  基础内容

基础内容包括一些文字、图标、进度条的渲染。

• <icon>

主要用于展示一些平台内预设的一些图标，比如警示图标等，如下

具体属性包括：

 各平台 type 有效值说明：

使用方法：

<template>
<view class="item" >
<icon :type="value" size="26"/>
<text>{{value}}</text>
</view>
</template>
<script>
export default {
data() {
return {
value:'success'
}
},
onLoad() {
},
methods: {
}
}
</script>

 渲染结果：

• <text>

用于包裹文本，属性包括：

• <rich-text>

用于包裹富文本

属性说明

• <progress>

进度条。

属性说明

• 表单组件

包括：

<button>(按键)||<checkbox-group>/<checkbox>(复选框)||<editor>(编辑器)||form(表单)【将组件内的用户输入的<switch> <input> <checkbox> <slider> <radio> <picker> 提交】||<input>(输入框)||<label>(标签)【使用for来绑定控件id】||<picker>(滚动选择器)【用于选择日期等】||<pick-viewer>【可以自定义ui和弹出方式】||<radio>【单选框】||<slider>【滑动选择器，如选择年龄】||<switch>【开关选择器】||<text-area>(多行输入器)

 <

•  页面跳转组件

• <navigator>

 主要用于页面跳转，从一个页面跳转至另一个页面，页面必须是本地页面且在page里注册过。

• 媒体组件

<audio>||<video>||<image>【分别可以添加音频、视频、图片，一般不直接用，可以使用插件】，<live-player>【实时音频视频播放，app不能用，aap用video】||<live-pusher>【直播模块】||<camera>【照相机组件，app不支持，支持微信小程序】

•  地图组件

• <map>

•  画布

• <canvas>

canvas的常用用途有图表和图片处理，在uni-app插件市场有大量基于canvas的插件，可搜索 图表 、 头像裁剪 、 海报 、 二维码 。

最后

以上就是震动饼干为你收集整理的uniapp组件学习https://uniapp.dcloud.io/component/视图容器 基础内容表单组件 页面跳转组件媒体组件 地图组件 画布的全部内容，希望文章能够帮你解决uniapp组件学习https://uniapp.dcloud.io/component/视图容器 基础内容表单组件 页面跳转组件媒体组件 地图组件 画布所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。