标签：图标 间隔 check max password tar res 不同的 实践
组件介绍
1、视图容器组件（view）
视图容器组件是wxml界面布局的基础组件，它和html的div功能类似，用于界面布局。
view 容器组件相关属性：
| 属性 | 类型 | 默认值 | 说明 |
| hover | Boolean | false | 是否启用单击态 |
| hover-class | String | none | 按下后显示的样式 |
| hover-start-time | Number | 50 | 按住后多久出现单击态 毫秒 |
| hover-stay-time | Number | 400 | 手松开后单击态保留的时间 毫秒 |
案例代码：
<view class=‘item‘ hover="true" hover-class=‘test‘ hover-start-time=‘60‘ hover-stay-time=‘4000‘> <input type=‘text‘ name="loginName" placeholder=‘请设置4-20位用户名‘ placeholder-class=‘holder‘ bindblur=‘accountblur‘></input> </view> .test{ background-color: red; }
2、可滚动的视图区域（scroll-view）
可滚动的视图区域允许视图区域内容横向滚动或纵向滚动，类似于浏览器的滚动条。
scroll-viwe 容器相关属性
| 属性 | 类型 | 默认值 | 说明 |
| scroll-x | Boolean | false | 允许横向滚动 |
| scroll-y | Boolean | false | 允许纵向滚动 |
| upper-threshold | Number | 50 | 距离顶部/左边多少像素时，触发scrolltoupper函数 |
| lower-threshold | Number | 50 | 距离底部/右边多少像素时，触发scrolltolower函数 |
| scroll-top | Number | 设置竖向滚动条的位置 | |
| scroll-left | Number | 设置横向滚动条的位置 | |
| scroll-into-view | String | 值为某子元素id，则滚动到该元素，元素顶部对齐到滚动区域顶部 | |
| bindscrolltoupper | EventHandle | 滚动到顶部/左边事件 | |
| bindscrolltolower | EventHandle | 滚动到底部/右边事件 | |
| bindscroll | EventHandle | 滚动时触发该事件 |
3、滑块视图容器（swiper）
滑块视图容器用来在指定区域内切换内容的显示，常用语海报轮播和页面内容切换效果
swiper相关属性：
| 属性 | 类型 | 默认值 | 说明 |
| indicator-dots | Boolean | false | 是否显示面板指示点 |
| autoplay | Boolean | false | 是否自动切换 |
| current | Number | 0 | 当前所在页面的index |
| interval | Number | 5000 | 自动切换时间间隔 |
| duration | Number | 500 | 滑动动画时长 |
| circular | Boolean | false | 是否采用衔接滑动 |
| bindchange | EventHandel | curren改变时触发change事件 |
示例代码：
<view class=‘img‘> <swiper indicator-dots=‘{{indicatorDots}}‘ autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{banners}}" wx:for-index="index" wx:key="{{index}}"> <swiper-item> <image src=‘{{item}}‘ style=‘width:100%; height:230px;‘></image> </swiper-item> </block> </swiper> </view>
Page({ /** * 页面的初始数据 */ data: { banners: [ ‘../../images/banner.jpg‘, ‘../../images/banner1.jpg‘, ‘../../images/banner2.jpg‘, ‘../../images/banner3.jpg‘ ], indicatorDots: true, autoplay: true, interval: 5000, duration: 1000 } })
4、图标组件（icon）
微信小程序提供了丰富的图标组件，应用于不同的场景。
icon属性
| 属性 | 类型 | 默认值 | 说明 |
| type | String | icon类型有：succes、succes_no_circle、info、warn、waitiong、cancel、download、search、clear | |
| size | Number | 23 | icon的大小 单位像素 |
| color | Color | icon的颜色 |
5、文本组件（text）
文本组价支持转义字符“\”
6、进度条组件（progress）
进度条组件是一种提高用户体验度的组件
progress属性
| 属性 | 类型 | 默认值 | 说明 |
| percent | Float | 百分比0~100 | |
| show-info | Boolean | false | 在进度条右侧显示百分比 |
| stroke-width | Number | 6 | 进度条线的宽度，单位px |
| color | Color | #09BB07 | 进度条的颜色 |
| active | Boolean | false | 进度条从左往右的动画 |
7、表单组件（form）
button 按钮组件
| 属性 | 类型 | 默认值 | 说明 |
| size | String | default | 按钮大小：default，mini |
| type | String | default | 按钮样式类型，有效值 primary，default，warn |
| plain | Boolean | false | 按钮是否镂空，背景色透明 |
| disabled | Boolean | false | 是否禁用 |
| form-type | String | 按钮类型：submit，reset | |
| hover-class | String | button-hver | 指定按钮按下去的样式类 |
| loading | Boolean | false | 名称是否带loading效果 |
| hover-start-time | Number | 50 | 安装之后多少毫秒后出现单击态 |
| hover-stay-time | Number | 400 | 手指松开后单击态保留多少毫秒 |
checkbox 多项选择器、radio 单项选择器
| 属性 | 类型 | 默认值 | 说明 |
| value | String | 选中的value值 | |
| disabled | Boolean | false | 是否禁用 |
| checked | Boolean | false | 是否选中当前项 |
| color | Color | 多选框的颜色 |
input 单行输入框
| 属性 | 类型 | 默认值 | 说明 |
| value | String | 输入框的初始内容 | |
| type | String | text | input类型：text，number，idcard，digit |
| password | Boolean | false | 是否是密码类型 |
| placeholder | String | 输入框占位符 | |
| placeholder-style | String | 指定的占位符样式 | |
| placeholder-class | String |
input-palceholder |
指定的占位符样式类 |
| disabled | Boolean | false | 是否禁用 |
| maxlength | Number | 140 | 最大输入长度，设置为-1时不限制长度 |
| cursor-spacing | Number | 0 | 指定光标与键盘的距离，单位px |
| auto-focus | Boolean | false | 自动聚焦，拉起键盘（即将废弃，直接使用focus） |
| foucs | Boolean | false | 获取焦点 |
| bindinput | EventHandle |
input事件 |
|
| bindfocus | EventHandle | focus事件 | |
| bindblur | EventHandle | blur事件 | |
| bindconfirm | EventHandle | 单击“完成”按钮时触发 |
textarea 多行输入框
| 属性 | 类型 | 默认值 | 说明 |
| value | String | 输入的内容 | |
| placeholder | String | 输入框为空时的占位符 | |
| placeholder-style | String | 占位符样式 | |
| placeholder-class | String | input-placeholder | 占位符样式类 |
| disabled | Boolean | false | 是否禁用 |
| maxlength | Number | 140 | 输入最大长度，设置为-1时不限制长度 |
| cursor-spacing | Number | 0 | 指定光标与键盘的距离 |
| focus | Boolean | false | 获取焦点 |
| auto-height | Boolean | false | 是否自动增高，设置auto-height时，style.height不生效 |
| fixed | Boolean | false | 如果textarea在一个position:fixed的区域中时，需要指定该参数为true |
| bindinechange | EventHandle | 行数变化时调用该函数 | |
| bindinput | EventHandle | input事件 | |
| bindfocus | EventHandle | focus事件 | |
| bindblue | EventHandle | blur事件 | |
| bindconfirm | EventHandle | 单击“完成”按钮时触发该事件 |
lable组件：只包含了一个for属性具体就不过多介绍该组件了。
上半部分组件就介绍到这里，以上组件内容做一个大概了解即可，做到在实践的过程中成长，多动手。接下来还会着重介绍一下滚动选择器（picker），滑动选择器（slider），开关选择器（switch），form表单的相关属性和一些地图、画布等组件的使用，为了美好的未来多投资自己才是最正确的选择的，告别懒惰！！！
标签：图标 间隔 check max password tar res 不同的 实践
原文地址：https://www.cnblogs.com/powerMG/p/9251954.html
