容器视图组件
view
view组件是块级组件,没有特殊功能, 主要用于布局展示,相当于HTML中的div,是布局中最基本的用户界面(UserInterface,I JI)组件,通过设置view 的CSS属性可以实现各种复杂的布局。
scroll-view
通过设置scroll-view组件的相关属性可以实现滚动视图的功能,
在index.wxml中写入代码:
在index.wxss中写入代码:
在index.js中写入代码:
swiper
概念:swiper组件可以实现轮播图、图片预览、滑动页面等效果。一个完整的swiper组件由<swiper/ >和<swiper-item/ >两个标签组成,它们不能单独使用。<swiper/ >中只能放置一个或多个<swiper-item/ >,若放置其他组件则会被删除;<swiper-item/ >内部可以放置任何组件,默认宽高自动设置为100%。<br>
基础内容组件
icon
icon组件即图标组件,通常用于表示一种状态,如success、info、warn、waiting、cancel等。
text
概念:text组件用于展示内容,类似HTML中的<span >, text组件中的内容支持长按选中,支持转义字符“\”,属于行内元素。
progress
progress组件用于显示进度状态,如资源加载、用户资料完成度、媒体资源播放进度等。progress组件属于块级元素
表单组件
button
button 组件用来实现用户和应用之间的交互,同时按钮的颜色起引导作用。一般来说在一个程序中一个按钮至少有3种状态:默认点击(default)、建议点击(primary)、谨慎点击(wam)。在构建项目时,应在合适的场景使用合适的按钮,当<buton>被<form/>包裹时,可以通过设置form-type属性来触发表单对应的事件
radio
概念:单选框用来从一组选项中选取一个选项。在小程序中,单选框由<radio-group/ >(单项选择器)和<radio/ >(单选项目)两个组件组合而成,一个包含多个 <radio/ >的<radio-group/ >表示一组单选项,在同一组单选项中<radio/ >是互斥的,当一个按钮被选中后,之前选中的按钮就变为非选。
checkbox
概念:复选框用于从一组选项中选取多个选项,小程序中复选框由 <checkbox -group/ >(多项选择器)和<checkbox/ >(多选项目)两个组件组合而成。一个<checkbox-group/ >表示一组选项,可以在一组选项中选中多个选项
switch
switch组件的作用类似开关选择器
slider
概念:slider组件为滑动选择器,可以通过滑动来设置相应的值
picker
概念:picker组件为滚动选择器,当用户点击picker组件时,系统从底部弹出选择器供用户选择。picker组件目前支持5种选择器,分别是:selector(普通选择器)、multiSelector(多列选择器)、time(时间选择器)、date(日期选择器)、region(省市选择器)。
picker-view
概念:picker-view组件为嵌入页面的滚动选择器。相对于picker组件,picker-view组件的列的个数和列的内容由用户通过<picker-view-column/ >自定义设置。
input
input组件为输入框,用户可以输入相应的信息
textarea
textarea组件为多行输入框组件,可以实现多行内容的输入。
label
概念:label组件为标签组件,用于提升表单组件的可用性。label组件支持使用for属性找到对应的id,或者将控件放在该标签下,当点击label组件时,就会触发对应的控件。for属性的优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。<br>目前,label组件可以绑定的控件有<button/ >、<checkbox/ >、<radio/>、<switch/ >。
form
概念:form组件为表单组件,用来实现将组件内的用户输入信息进行提交。当<form/ >表单中formType为submit的<button/ >组件时,会将表单组件中的value值进行提交。
多媒体组件
image
image组件为图像组件,与HTML中的 <img/ >类似,系统默认image组件的宽度为300 px、高度为2250 px, image组件的属性如表4-21所示。
audio
audio组件用来实现音乐播放.暂停等,其属性如表4-22所示。
video
video组件用来实现视频的播放、暂停等。视频的默认宽度为300 px,高度为225 px, video组件的属性如表4-23所示。
camera
camera组件为系统相机组件,可以实现拍照或录像功能。在一个页面中,只能有一个camera组件。在开发工具中运行时,使用电脑摄像头实现拍照或录像;在手机中运行时,使用手机前后摄像头实现拍照或录像。
其他组件
map
概念:map组件用于在页面中显示地图或路径,常用于LBS(基于位置服务)或路径指引,功能相对百度地图、高德地图较简单,目前具备绘制图标、路线、半径等能力,不能在croll-view、swiper、picker-view、movable-view组件中使用。
canvas
canvas组件用来绘制图形,相当于一块无色透明的普通图布。canvas组件本身并没有绘图能力,仅仅是图形容器,通过绘图API实现绘图功能。在默认情况下,canvas组件的默认宽度为300 px,高度为225 px,同一页面中的canvas-id不能重复,否则会出错。canvas组件的属性如表4-28所示。