一：小程序组件认识

定义内容：组件是视图层的基本组成单元、自带微信一些功能和风格样式

组件属性分析：
1 . 属性以字符"-"链接
2 . 属性特征：属性类型、共同属性、特殊属性
3 . 属性类型演示：

Boolean     布尔值     组件上有该变量 其值为true
Number      数字      1,1.2，2.5...
String      字符串     "string"
Array       数组      [1,"string"]
Object      对象      {key : value}
EvenHandler     事件处理函数      是page中定义的事件处理函数名
Any     任意属性

4 . 共同属性演示：

id              string          组件的唯一标示         保持整个页面唯一
class           string          组件的样式类          对应在wxss中定义的样式类
style           string          组件中内联样式         可以动态设置的内联样式
hidden          Boolean         组件是否显示          所以的组件默认显示
data-*(*任意)     Any           自定义属性             组件上触发事件时，会发送给事件处理函数
bind/catch      EvenHandler     组件的事件

二：小程序组件详解

1 . <view>
定义内容: 页面视图容器, 类似html中的div标签, 目的是将页面划分为块, 区分内容区域

2 . <scroll-view>
定义内容: 具有view相同的功能，但它是可以滚动的; 竖向滚动时必须通过 wxss 设定height
常用属性: scroll-x scroll-y scroll-top scroll-left等
布尔类型: scroll-x="{{false}}"

3 . <swiper>
定义属性: 滑动视图容器 通过手指滑动达到切换效果 【只可放置<swiper-item>组件 其他节点会被删除】
常用属性:
indicator-dots false 面板指示点(轮播小点)
autoplay false 是否自动切换
current 0 当前页面的index
interval 5000 自动切换间隔时间
duration 1000 滑动时长 也就是动画执行的时间
bindchange current改变时会处罚change事件, event.detail = {{ current: current }}

4 . icon
定义属性: 小程序中可以用到的图标icon <icon type="success" size="{{}}" />
常用属性:
type String 有效值:success,info,warn,waiting,cancel,download,search,clear,success_no_circle
size Number 默认值23px
color color 默认值icon颜色, 可以在css中设置, 支持rgb格式

5 . progress
定义内容: 进度条
常用属性:
percent Float 默认值无 百分比0~100
show-info Boolean false 在进度条右侧显示百分比
stroke-width Number 6 进度条线的宽度单位px
color Color #09BB07 进度条颜色 （请使用 activeColor）
activeColor Color 已选择的进度条的颜色
backgroundColor Color 未选择的进度条的颜色
active Boolean false 进度条从左往右的动画
active-mode String backwards backwards: 动画从头播；forwards：动画从上次结束点接着播

6 . 表单组件form 【所有的组件必须都含有Name 否则提交不上】
定义内容: 表单，将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交
常用属性:
button 按钮
checkbox-group 多项选择器，内部由多个checkbox组成
input type="text/number/date/button..."
picker 滚动选择器，通过来区分选择器: 普通选择mode=selector 时间选择mode=time 日期选择mode=date
radio-group 单选选择框，内部由多个radio组成
slider 滑动选择器
switch 开关选择器
button 按钮

7 . 操作反馈类组件
action-sheet 从屏幕底下的菜单表
modal 静态弹窗 用于操作确认或者错误提示
toast 消息提示框
loading 加载动画 用于加载数据时页面提示
audio 音频
video 视频
map 地图 开发者工具不支持
canvas js 绘图

 
这里只是列举了最常用到的几个组件，具体参考官网提供的组件API
传送门：https://developers.weixin.qq.com/miniprogram/dev/component/

文章目录