ホームページ > 記事 > ウェブフロントエンド > コンポーネントの基本的な使用法を習得するための uni-app 入門チュートリアル

コンポーネントの基本的な使用法を習得するための uni-app 入門チュートリアル

coldplay.xixi転載: 2021-01-11 09:40:573839ブラウズ

記事目次

まえがき
1. 基本コンポーネント
- 1.scroll-view
- 2.swiper
- 4.rich-text
- 5.process
- 2.checkbox
- 3.input
- 4.label
- 5.picker
- 6.ラジオ
- 7.スライダー
- 8.スイッチ
- 9.テキストエリア
- 10.フォーム
- 2.パラメーターの受け渡し
- 2.image
- 3.video

はじめに

この記事では主に、基本コンポーネント (スクロールビュー、スワイパー、テキスト、など)、フォームコンポーネント (ボタン、チェックボックス、入力など)、ナビゲーションコンポーネントのナビゲーターおよびページパラメーター、メディアコンポーネント (オーディオ、画像、ビデオなど)、これらのコンポーネントの共通プロパティとメソッドの詳細と使用方法を提供します。例とデモンストレーション。

1. 基本コンポーネント

コンポーネントはビューレイヤーの基本コンポーネントであり、通常、コンポーネントには開始タグと終了タグが含まれます。 # は、コンテンツが 2 つのタグ内に収まるようにこのコンポーネントを変更するために使用されます。

すべてのコンポーネント名と属性名は小文字であり、単語はハイフン - で接続されています。ルートノードは

			#水平スクロールを許可
Boolean	false	垂直スクロールを許可
Number	50	scrolltoupper イベントをトリガーする上/左からの距離 (単位 px)


		#水平スクロールバーの位置を設定します
	#値は特定のサブ要素 ID である必要があります (ID を数字で始めることはできません)。スクロールできる方向を設定し、その方向の要素までスクロールします。		scroll-with-animation
false	スクロールバーの位置を設定するときにアニメーショントランジションを使用する		enable-flex
false	フレックスボックスレイアウトを有効にします。これをオンにすると、display: flex を宣言する現在のノードが flex コンテナになり、その子ノードで動作します。		#一般的なイベントと意味は次のとおりです。
#イベント	意味

下/右にスクロールすると、scrollto lower イベントがトリガーされます。
	@refresherpulling
	@refresherrefresh
	@refresherrestore

属性名	タイプ	デフォルト値	説明
indicator-dots	Boolean	false	パネルインジケータードットを表示するかどうか
インジケーターの色	Color	rgba(0, 0, 0, .3)	インジケーターの色
indicator-active-color	Color	#000000	現在選択されているインジケーターポイントの色

			{true}} に設定されており、スライド処理中です。中央の複数の画面が表示されている場合のクラス
Boolean	false	自動的に切り替えるかどうか
数値	0	現在のスライダーのインデックス
数値	5000	自動切り替え時間間隔
番号	500	スライドアニメーションの継続時間
Boolean	false	接続スライドを使用するかどうか、つまり最後まで再生してから最初に戻るかどうか

	## 変更イベントは、#current が変更されるとトリガーされます。event.detail = {current: current、source:source}
スワイパーアイテムの位置が変更されると、トランジションイベントがトリガーされます。event.detail = {dx: dx, dy: dy}、Alipay アプレットは現在、dx、dy アプリをサポートしていません。 H5、WeChat アプレット、Alipay アプレット、ByteDance アプレット、QQ アプレット

index.vue は次のとおりです:	表示:

属性名	类型	默认值	说明
percent	Float	无	百分比0~100
show-info	Boolean	false	在进度条右侧显示百分比
stroke-width	Number	6	进度条线的宽度，单位px
activeColor	Color	#09BB07（百度为#E6E6E6）	已选择的进度条的颜色
backgroundColor	Color	#EBEBEB	未选择的进度条的颜色
active	Boolean	false	进度条从左往右的动画




	space属性のオプションの値と意味は次のとおりです:

属性名	类型	默认值	说明
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标
form-type	String	无	用于 `<form>` 组件，点击分别会触发 `<form>` 组件的 submit/reset 事件
open-type	String	无	开放能力

属性名	类型	默认值	说明
value	String	无	`<checkbox>` 标识，选中时触发 `<checkbox-group>` 的 change 事件，并携带 `<checkbox>` 的 value
disabled	Boolean	false	是否禁用
checked	Boolean	false	当前是否选中，可用来设置默认选中
color	Color	无	checkbox的颜色，同css的color

属性名	类型	默认值	说明
value	String	无	输入框的初始内容
type	String	text	input 的类型
password	Boolean	false	是否是密码类型
placeholder	String	无	输入框为空时占位符
placeholder-style	String	无	指定 placeholder 的样式
placeholder-class	String	无	“input-placeholder” 指定 placeholder 的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
confirm-type	String	done	设置键盘右下角按钮的文字，仅在 type=“text” 时生效。

事件	含义
@input	当键盘输入时，触发input事件，event.detail = {value}
@focus	输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度
@blur	输入框失去焦点时触发，event.detail = {value: value}
@confirm	点击完成按钮时触发，event.detail = {value: value}
@keyboardheightchange	键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}

属性名	类型	说明
range	Array / Array	mode为 selector 或 multiSelector 时，range 有效
@change	EventHandle	value 改变时触发 change 事件，event.detail = {value: value}

属性名	类型	说明
value	String	表示选中的时间，格式为"hh:mm"
start	String	表示有效时间范围的开始，字符串格式为"hh:mm" App 不支持
end	String	表示有效时间范围的结束，字符串格式为"hh:mm" App 不支持
@change	EventHandle	value 改变时触发 change 事件，event.detail = {value: value}

属性名	类型	说明
value	String	表示选中的日期，格式为"YYYY-MM-DD"
start	String	表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
end	String	表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
fields	String	有效值 year、month、day，表示选择器的粒度，默认为 day，App 端未配置此项时使用系统 UI
@change	EventHandle	value 改变时触发 change 事件，event.detail = {value: value}

属性名	类型	说明
value	Array	表示选中的省市区，默认选中每一列的第一个值
custom-item	String	可为每一列的顶部添加一个自定义的项
@change	EventHandle	value 改变时触发 change 事件，event.detail = {value: value}
@cancel	EventHandle	取消选择时触发

属性名	类型	默认值	说明
value	String	无	`<radio>` 标识。当该 `<radio>` 选中时，`<radio-group>` 的 change 事件会携带 `<radio>` 的 value
checked	Boolean	false	当前是否选中
disabled	Boolean	false	是否禁用
color	Color	无	radio的颜色，同css的color






##リッチテキスト

漢字スペース半角
	nbsp

	nodes	配列 / 文字列	[]

属性名	类型	说明
report-submit	Boolean	是否返回 formId 用于发送模板消息
@submit	EventHandle	携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}，report-submit 为 true 时才会返回 formId
@reset	EventHandle	表单重置时会触发 reset 事件

属性名	类型	默认值	说明
min	Number	0	最小值
max	Number	100	最大值
step	Number	1	步长，取值必须大于 0，并且可被(max - min)整除
disabled	Boolean	false	是否禁用
value	Number	0	当前取值
activeColor	Color	微信是绿色(#1aad19)，头条是红色，其他平台是蓝色	滑块左侧已选择部分的线条颜色
backgroundColor	Color	#e9e9e9	滑块右侧背景条的颜色
block-size	Number	28	滑块的大小，取值范围为 12 - 28
block-color	Color	#ffffff	滑块的颜色
show-value	Boolean	false	是否显示当前 value
@change	EventHandle	无	完成一次拖动后触发的事件，event.detail = {value: value}

属性名	类型	默认值	说明
value	String	无	输入框的内容
placeholder	String	无	输入框为空时占位符
placeholder-style	String	无	指定 placeholder 的样式
placeholder-class	String	textarea-placeholder	指定 placeholder 的样式类
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
focus	Boolean	false	获取焦点
@focus	EventHandle	无	输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度
@blur	EventHandle	无	输入框失去焦点时触发，event.detail = {value, cursor}
@linechange	EventHandle	无	输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
@input	EventHandle	无	当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上
@confirm	EventHandle	无	点击完成时，触发 confirm 事件，event.detail = {value: value}

属性名	类型	默认值	说明
url	String	无	应用内的跳转链接，值为相对路径或绝对路径，如："…/first/first"，"/pages/first/first"，注意不能加 .vue 后缀
open-type	String	navigate	跳转方式，与api接口相对应
delta	Number	无	当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数
target	String	self	在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram

接口	含义
uni.navigateTo(OBJECT)	保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
uni.redirectTo(OBJECT)	关闭当前页面，跳转到应用内的某个页面
uni.reLaunch(OBJECT)	关闭所有页面，打开到应用内的某个页面
uni.switchTab(OBJECT)	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
uni.navigateBack(OBJECT)	关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

属性名	类型	默认值	说明
id	String	无	audio 组件的唯一标识符
src	String	无	要播放音频的资源地址
loop	Boolean	false	是否循环播放
controls	Boolean	false	是否显示默认控件
poster	String	无	默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
name	String	无	未知音频
author	String	未知作者	默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效
@error	EventHandle	无	当发生错误时触发 error 事件，detail = {errMsg: MediaError.code}
@play	EventHandle	无	当开始/继续播放时触发play事件
@pause	EventHandle	无	当暂停播放时触发 pause 事件
@timeupdate	EventHandle	无	当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}
@ended	EventHandle	无	当播放到末尾时触发 ended 事件

属性名	类型	默认值	说明
src	String	无	图片资源地址
mode	String	‘scaleToFill’	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载。只针对page与scroll-view下的image有效
fade-show	Boolean	true	图片显示动画效果
webp	boolean	false	默认不解析 webP 格式，只支持网络资源
show-menu-by-longpress	boolean	false	开启长按图片显示识别小程序码菜单
@error	HandleEvent	无	当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: ‘something wrong’}
@load	HandleEvent	无	当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:‘图片高度px’, width:‘图片宽度px’}

属性名	类型	默认值	说明
src	String	无	要播放视频的资源地址
autoplay	Boolean	false	是否自动播放
loop	Boolean	false	是否循环播放
muted	Boolean	false	是否静音播放
initial-time	Number	无	指定视频初始播放位置，单位为秒（s）
duration	Number	无	指定视频时长，单位为秒（s）
controls	Boolean	true	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
show-progress	Boolean	true	若不设置，宽度大于240时才会显示
poster	String	无	视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
@play	EventHandle	无	当开始/继续播放时触发play事件
@pause	EventHandle	无	当暂停播放时触发 pause 事件
@ended	EventHandle	无	当播放到末尾时触发 ended 事件
@timeupdate	EventHandle	无	播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
@fullscreenchange	EventHandle	无	当视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal
@waiting	EventHandle	无	视频出现缓冲时触发
@error	EventHandle	无	视频播放出错时触发
@progress	EventHandle	无	加载进度变化时触发，只支持一段加载。event.detail = {buffered}，百分比
@controlstoggle	eventhandle	无	切换 controls 显示隐藏时触发。event.detail = {show}

コンポーネントの基本的な使用法を習得するための uni-app 入門チュートリアル

関連記事