微信小程序组件标签
<!--
微信小程序中 标签也叫做组件
1.view组件是一个容器组件(可以放文字、可以放组件),可以理解为div标签
hover-class:指定按下去的样式类
--->
<view hover-class="a">123</view>
<!--
2.button组件
size:按钮的大小
type: primary 绿色 default 白色 warn 红色
plain:false|true 按钮是否镂空，背景色透明
disabled:boolean|false 是否禁用
loading:false|true 名称前是否带 loading 图标
form-type:"submit"|"reset" 点击分别会触发 form 组件的 submit/reset 事件
hover-class:"class名" ：按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation:false|true 阻止本节点的祖先节点出现点击态
hover-start-time: 默认20毫秒，按住后多久出现点击态
hover-stay-time:默认70毫秒 松开后点击状态保留时间
-->
<button size="mini">按钮1</button>
<button size="default" type='primary'>按钮1</button>
<button size="mini" type='default'>按钮1</button>
<button size="mini" type='warn'>按钮1</button>
<button size="mini" type='warn' plain='true'>按钮1</button>
<button size="mini" disabled='true'>按钮1</button>
<button size="default" loading='true'>按钮1</button>
<button size="mini" hover-class="a">按钮1</button>
<view hover-class="a" >
<button hover-stop-propagation="true" size="mini" hover-class="a">按钮1</button>
</view>
<button hover-start-time="2000" size="mini" hover-class="a">按钮1</button>
<button hover-stay-time="5000" size="mini" hover-class="a">按钮1</button>
效果：
<!--
2.输入框
value string 是 输入框的初始内容
type string text 否 input 的类型
password boolean false 否 是否是密码类型
placeholder string 是 输入框为空时占位符
placeholder-style string 是 指定 placeholder 的样式
placeholder-class string input-placeholder 否 指定 placeholder 的样式类
disabled boolean false 否 是否禁用
maxlength number 140 否 最大输入长度，设置为 -1 的时候不限制最大长度
bindinput eventhandle 是 键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，处理函数可以直接 return 一个字符串，将替换输入框的内容。
bindfocus eventhandle 是 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度
bindblur eventhandle 是 输入框失去焦点时触发，event.detail = {value: value}
-->
<input style="border:1px solid"/>
效果：
<!--
3.表单标签
表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。
bindsubmit eventhandle 否 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}
bindreset eventhandle 否 表单重置时会触发 reset 事件
-->
<form>
<input style="border:1px solid"/>
<button form-type="submit">提交</button>
<button form-type="reset">重置</button>
</form>
效果：
<!--
3.text组件：用来放文本、类似于span标签, 内只支持 text 嵌套
selectable:false|true 文本是否能选中
space:ensp|emsp|nbsp 显示连续空格
decode:true|false 是否解码 < >
-->
<view>---</view>
<text>文本1</text>
<text selectable="true">文本2</text>
<view><text space="ensp">你好， 哈哈哈（空格是中文字符一半大小）</text></view>
<view><text space="emsp">你好， 哈哈哈（空格是中文字符大小）</text></view>
<view><text space="nbsp">你好， 哈哈哈（空格根据字体设置）</text></view>
<view>----</view>
<view><text decode="{{true}}">你好， 哈哈哈（空格是中文字符一半大小）</text></view>
<view><text decode="{{true}}">你好， 哈哈哈（空格是中文字符大小）</text></view>
<view><text decode="{{true}}">你好， 哈哈哈（空格根据字体设置）</text></view>
效果：
<!--
4.icon图标
type:图标类型：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size:图标大小 number/string 默认23
color：图标颜色
-->
<icon type="success" size='40'></icon>
<icon type="success_no_circle"></icon>
<icon type="info"></icon>
<icon type="warn"></icon>
<icon type="waiting"></icon>
<icon type="cancel"></icon>
<icon type="download"></icon>
<icon type="search"></icon>
<icon type="clear"></icon>
<icon type="download" color="red"></icon>
效果：
<!--
5.checkbox多选
value string 否 checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value
disabled:true|false 是否禁用
checked:true|false 当前是否选中，可用来设置默认选中
color:'颜色' #09BB07 否 checkbox对号的颜色
6.checkbox-group 多项选择器，内部由多个checkbox组成。
checkbox-group中选中项发生改变时触发 change 事件，detail = {value:[选中的checkbox的value的数组]}
-->
<checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for="{{items}}" wx:key>
<checkbox color="red" value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>
效果：
<!--
7.radio单选
value string 否 radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value
disabled:true|false 是否禁用
checked:true|false 当前是否选中，可用来设置默认选中
color:'颜色' #09BB07 否 checkbox对号的颜色
8.radio-group 单项选择器，内部由多个 radio 组成
bindchange radio-group中选中项发生改变时触发 change 事件，detail = {value:[选中的checkbox的value的数组]}
-->
<radio-group class="radio-group" bindchange="radioChange">
<label class="radio" wx:for="{{items}}" wx:key>
<radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</radio-group>
效果：
<!--
9.textarea
value string 否 输入框的内容
placeholder string 否 输入框为空时占位符
placeholder-style string 否 指定 placeholder 的样式，目前仅支持color,font-size和font-weight
placeholder-class string textarea-placeholder 否 指定 placeholder 的样式类
disabled boolean false 否 是否禁用
bindinput eventhandle 否 当键盘输入时，触发 input 事件，event.detail = {value, cursor, keyCode}
-->
<textarea bindinput="textareaInput" style="border:1rpx solid red" value='11' ></textarea>
效果：
<!--
10.switch开关组件
checked 默认false 否 是否选中
disabled 默认 false 否 是否禁用
type 默认 switch 否 样式，有效值：switch, checkbox
color 默认 #04BE02 开关背景颜色
-->
<switch></switch>
<switch type='checkbox'></switch>
<switch color='#f00' ></switch>
<switch checked bindchange="switch1Change"/>
效果：
<!--
11.slider 滑动杆标签
min number 0 否 最小值
max number 100 否 最大值
step number 1 否 步长，取值必须大于 0，并且可被(max - min)整除
disabled boolean false 否 是否禁用
value number 0 否 当前取值
backgroundColor #e9e9e9 否 背景条的颜色
activeColor color #1aad19 否 已选择的颜色
block-size number 28 否 滑块的大小，取值范围为 12 - 28
block-color color #ffffff 否 滑块的颜色
show-value boolean false 否 是否显示当前 value
bindchange eventhandle 否 完成一次拖动后触发的事件，event.detail = {value}
bindchanging eventhandle 否 拖动过程中触发的事件，event.detail = {value}
-->
<slider bindchange="sliderchange" show-value="true" block-color="#00f" activeColor="#00f" backgroundColor="red" bindchanging="sliderchange2" step="5"/>
效果：
<!--
13.progress 进度条
进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
percent number 否 百分比0~100
show-info boolean false 否 在进度条右侧显示百分比
border-radius number/string 0 否 圆角大小
font-size number/string 16 否 右侧百分比字体大小
stroke-width number/string 6 否 进度条线的宽度
activeColor string #09BB07 否 已选择的进度条的颜色
backgroundColor string #EBEBEB 否 未选择的进度条的颜色
active boolean false 否 进度条从左往右的动画
active-mode string backwards 否 backwards: 动画从头播；forwards：动画从上次结束点接着播
bindactiveend eventhandle 否 动画完成事件
-->
<progress percent="{{num}}" active active-mode="forwards" show-info/>
<button bindtap='changeNum'>改变</button>
效果：
<!--
14.image图片，支持JPG、PNG、SVG格式
src string 否 图片资源地址
mode string scaleToFill 否 图片裁剪、缩放的模式
scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
show-menu-by-longpress boolean false 否 开启长按图片显示识别小程序码菜单
binderror eventhandle 否 当错误发生时触发，，event.detail = {errMsg}
bindload eventhandle 否 当图片载入完毕时触发，event.detail = {height, width}
-->
<image style='width:200rpx;height:200rpx;border:1px solid red' src="../../img/img.jpg" mode="scaleToFill"/>
<image style='width:200rpx;height:200rpx;border:1px solid red' src="../../img/img.jpg" mode="aspectFit"/>
<image style='width:200rpx;height:200rpx;border:1px solid red' src="../../img/img.jpg" mode="aspectFill"/>
<image style='width:200rpx;height:200rpx;border:1px solid red' src="../../img/img.jpg" mode="widthFix"/>
<image show-menu-by-longpress style='width:200rpx;height:200rpx;border:1px solid red' src="../../img/img.jpg" />
效果：
<!--
15.富文本：里面插入的标签可以显示
nodes array/string [] 否 节点列表/HTML String
space string 否 显示连续空格
ensp 中文字符空格一半大小 emsp 中文字符空格大小 nbsp 根据字体设置的空格大小
-->
<rich-text nodes="<h1>标题</h1>"></rich-text>
<rich-text nodes="html" space="ensp"></rich-text>
<rich-text nodes="<h1>标 题</h1>" ></rich-text>
<rich-text nodes="<h1>标 题</h1>" space="ensp"></rich-text>
<rich-text nodes="<h1>标 题</h1>" space="emsp"></rich-text>
<rich-text nodes="<h1>标 题</h1>" space="nbsp"></rich-text>
效果：
<!--
16.可滚动视图区域
使用竖向滚动时，需要给scroll-view一个固定高度
scroll-x boolean false 否 允许横向滚动
scroll-y boolean false 否 允许纵向滚动
upper-threshold number/string 50 否 距顶部/左边多远时，触发 scrolltoupper 事件
lower-threshold number/string 50 否 距底部/右边多远时，触发 scrolltolower 事件
scroll-top number/string 否 设置竖向滚动条位置
scroll-left number/string 否 设置横向滚动条位置
scroll-into-view string 否 值应为某子元素id（id不能以数字开头）。
设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation boolean false 否 在设置滚动条位置时使用动画过渡
bindscrolltoupper eventhandle 否 滚动到顶部/左边时触发
bindscrolltolower eventhandle 否 滚动到底部/右边时触发
bindscroll eventhandle 否 滚动时触发，
event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
-->
<scroll-view scroll-y style="height:200px;border:1px solid red;box-sizing:border-box">
<view wx:for="{{99}}" wx:key>{{item}}</view>
</scroll-view>
效果：
<!--
17.swiper 轮播图
滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。
ndicator-dots boolean false 否 是否显示面板指示点
indicator-color color rgba(0, 0, 0, .3) 否 指示点颜色
indicator-active-color color #000000 否 当前选中的指示点颜色
autoplay boolean false 否 是否自动切换
current number 0 否 当前所在滑块的 index
interval number 5000 否 自动切换时间间隔
duration number 500 否 滑动动画时长
circular boolean false 否 是否采用衔接滑动
vertical boolean false 否 滑动方向是否为纵向
previous-margin string "0px" 否 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-margin string "0px" 否 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
display-multiple-items number 1 否 同时显示的滑块数量
skip-hidden-item-layout boolean false 否 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
easing-function string "default" 否 指定 swiper 切换缓动动画类型
default 默认缓动函数
linear 线性动画
easeInCubic 缓入动画
easeOutCubic 缓出动画
easeInOutCubic 缓入缓出动画
bindchange eventhandle 否 current 改变时会触发 change 事件，event.detail = {current, source}
bindtransition eventhandle 否 swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}
bindanimationfinish eventhandle 否 动画结束时会触发 animationfinish 事件，event.detail 同上
18.swiper-item 仅可放置在swiper组件中，宽高自动设置为100%。
item-id string 否 该 swiper-item 的标识符
-->
<swiper indicator-dots="{{true}}"
autoplay="{{true}}" interval="5000" duration="1000" >
<block wx:for="{{imgUrls}}" wx:key>
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
效果：
<!--
19.movable-area 可移动区域
scale-area Boolean false 否 当里面的movable-view设置为支持双指缩放时，
设置此值可将缩放手势生效区域修改为整个movable-area
注意：
movable-area 必须设置width和height属性，不设置默认为10px**
当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；
当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）
20.movable-view 可移动的容器
可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。
direction string none 否 movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia boolean false 否 movable-view是否带有惯性
out-of-bounds boolean false 否 超过可移动区域后，movable-view是否还可以移动
x number 否 定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
y number 否 定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
damping number 20 否 阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
friction number 2 否 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值
disabled boolean false 否 是否禁用
scale boolean false 否 是否支持双指缩放，默认缩放手势生效区域是在movable-view内
scale-min number 0.5 否 定义缩放倍数最小值
scale-max number 10 否 定义缩放倍数最大值
scale-value number 1 否 定义缩放倍数，取值范围为 0.5 - 10
animation boolean true 否 是否使用动画
bindchange eventhandle 否 拖动过程中触发的事件，event.detail = {x, y, source}
bindscale eventhandle 否 缩放过程中触发的事件，event.detail = {x, y, scale}，x和y字段在2.1.0之后支持
htouchmove eventhandle 否 初次手指触摸后移动为横向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch
vtouchmove eventhandle 否 初次手指触摸后移动为纵向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch
-->
<view class="section">
<view class="section__title">movable-view区域小于movable-area</view>
<movable-area style="height: 200px; width: 200px; background: red;">
<movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">
</movable-view>
</movable-area>
<view class="btn-area">
<button size="mini" bindtap="tap">click me to move to (30px, 30px)</button>
</view>
<view class="section__title">movable-view区域大于movable-area</view>
<movable-area style="height: 100px; width: 100px; background: red;">
<movable-view style="height: 200px; width: 200px; background: blue;" direction="all">
</movable-view>
</movable-area>
<view class="section__title">可放缩</view>
<movable-area style="height: 200px; width: 200px; background: red;" scale-area>
<movable-view style="height: 50px; width: 50px; background: blue;" direction="all" bindchange="onChange" bindscale="onScale" scale scale-min="0.2" scale-max="4" scale-value="2">
</movable-view>
</movable-area>
</view>
效果：
<!--
21.跳转的链接
navigator
url string 否 当前小程序内的跳转链接
open-type string navigate 否 跳转方式
navigate 保留当前页面，跳转到应用内的某个页面。
redirect 关闭当前页面，跳转到应用内的某个页面。
switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch 关闭所有页面，打开到应用内的某个页面
navigateBack 关闭当前页面，返回上一页面或多级页面。
-->
<view class="btn-area">
<navigator url="/pages/a/a" >跳转到新页面</navigator>
<navigator url="/pages/c/c" open-type="redirect">在当前页打开</navigator>
<navigator url="/pages/b/b" open-type="switchTab">切换 Tab</navigator>
</view>
效果：
<!--
22.滚动选择器
mode string selector 否 选择器类型
selector 普通选择器
multiSelector 多列选择器
time 时间选择器
date 日期选择器
region 省市区选择器
-->
<picker mode="region">请选择地区</picker>
<picker mode="date">请选择日期</picker>
<picker mode="time">请选择时间</picker>
<picker mode="selector" range="{{[1,2,3,4]}}">请选择数字</picker>
<picker mode="multiSelector" value="1" range="{{[[1,1],[2,2]]}}">请选择数字</picker>
效果：
Js页面对应的代码
/**
* 页面的初始数据
*/
data: {
items: [
{ name: 'USA', value: '美国' },
{ name: 'CHN', value: '中国', checked: 'true' },
{ name: 'BRA', value: '巴西' },
{ name: 'JPN', value: '日本' },
{ name: 'ENG', value: '英国' },
{ name: 'TUR', value: '法国' },
],
num:20,
html: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]}
],
imgUrls: [
'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
]
},
checkboxChange: function (e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
},
radioChange: function (e) {
console.log('radio发生change事件，携带value值为：', e.detail.value)
},
textareaInput:function(e){
console.log(e.detail )
},
switch1Change: function (e) {
console.log('switch1 发生 change 事件，携带值为', e.detail.value)
},
sliderchange:function (e) {
console.log('发生 change 事件，携带值为', e.detail.value)
},
sliderchange2: function (e) {
console.log('发生 changeing 事件，携带值为', e.detail.value)
},
changeNum:function(e){
this.setData({num:50})
},