微信小程序官方文档地址 https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

小程序开发框架 - 组件类型

视图容器
基础内容
表单组件
导航组件
地图组件
媒体组件
开放能力
画布

视图容器

view 容器组件
scroll-view 滚动组件
swiper 轮播组件
swiper-item
- 仅可放置在swiper组件中，宽高自动设置为100%。
movable-area 可移动区域
movable-view 支持移动和缩放的组件
cover-view 容器组件
- 与view不同是可以覆盖在原生组件之上，如canvas、video
cover-image
- 覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。

view组件

属性名	默认值	说明
hover-class	node	指定按下去的样式类；值为none，没有点击态效果
hover-stop-propagation	false	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	50ms	按住多久后出现点击态
hover-stay-time	400ms	手指头松开后点击态保留时间

scroll-view

属性名	默认值	说明
scroll-x	false	允许横向滚动
scroll-y	false	允许纵向滚动
upper-threshold	50	距离顶部/左边多远时，触发scrollToupper事件
lower-threshold	50	距离底部/右边多远时，触发scrollTolower事件
scroll-top		设置竖向滚动条位置
scroll-left		设置横向滚动条位置
scrll-into-view		值为某元素id(id不能以数字开头),设置哪个方向可滚动，则在哪个方向上滚动到该元素；
scroll-width-animation	false	在设置滚动条位置时，是否使用动画
enable-back-to-top	false	IOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
enable-flex	false	启用flex布局，开启后，当前节点声明了display: flex,就会成为flex-container,并作用于孩子节点
scroll-anchoring	false	开启scroll-anchoring特性，即控制滚动位置不随位置变化而抖动；尽在IOS下生效；安卓下可参考overflow-anchor属性
refresher-enabled	false	是否开启自定义下拉刷新
refresher-threshold	45	设置下拉刷新阈值
refresher-default-style	black	设置自定义下拉刷新默认样式，支持设置black
refresher-background	#fff	设置自定义下拉刷新区域背景颜色
refresher-triggered	false	设置当前下拉刷新状态；true表示下拉刷新已经被触发；false表示未被触发
bindscrolltoupper	eventhandle,false	滚动到顶部/左边时触发
bindscrolltolower	eventhandle,false	滚动到底部/右边时触发
bindscroll	eventhandle,false	滚动时触发
bindrefresherpulling	eventhandle,否	自定义下拉刷新控件被下拉
bindrefresherfresh	eventhandle,否	自定义下拉刷新被触发
bindrefresherstore	eventhandle,否	自定义下拉刷新被复位
bindrefresherabort	eventhandle,否	自定义下拉刷新被中止

movable-view

可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。

基础内容组件

icon
text
rich-text
- rich-text组件内部，不能再嵌套rich-text组件的
- 事件流: touchstart,touchend,tap
progress

表单组件

button
- 进入客服会话，返回的detail > errMsg 微信开发者工具不支持调试，得在真机上调试
checkbox
- 需要用checkbox-group包裹，否则拿不到状态变化
form
- 可以将组件内用户输入的switch,input,checkbox,slider,radio,picker信息提交
- 当点击form表单中formType为submit的button组件时，会将表单中的value组件进行提交，需要在表单组件中加上name来作为key;
input
- focus事件会获取焦点，并拉起键盘
- selection-start，光标起始位置；设置auto-focus有效
label
- 标签组件，用来改进表单组件的可用性
picker
- 选择控件
- 与picker-view区别是我们主动触发从底部弹出来的选择控件
- 可以通过mode表示类型
picker-view
- 嵌在页面内的选择控件
- 无mode类型
picker-view-column
- 只能放在picker-view中
radio
- 需要被radio-group包裹，子元素发生变化是触发change事件
slider
- selected-color和activeColo都代表当前滑动条已选择的颜色，推荐使用activeColor
switch
- checkbox需要结合checkbox-group,如果只有一个checkbox的话，可以用switch设置type="checkbox"来实现；
text-area
- 设置auto-height属性以后，设置的height属性不生效

微信小程序导航组件

navigator
- 页面链接

媒体组件

audio
video
camera
- 系统相机组件
- 需要用户授权scope.camera
image
live-player
- 实时播放组件,直播
- 直播组件使用需要通过类目审核才能使用
- 通过审核以后，需要在小程序管理后台接口设置开通权限
- 目前在开发者工具上不支持
live-pusher
- 实时录制组件
- 和live-player组件一样需要授权
地图组件map
canvas组件
- 默认宽度300px，高度225px
- 同一页面canvasId不能重复

小程序开放能力组件

获取用户信息，手机号，打开app

open-data
- 展示微信开放数据
web-view是用来加载外部网页的容器
- 会自动铺满整个小程序页面，个人小程序和海外小程序不支持使用；
  - src，指向网页的连接，需登录小程序管理后台设置域名白名单
  - 在小程序业务域名添加此域名
  - 会生成一个校验文件，下载此文件
  - 将此文件放在网站根目录，保证通过域名 + 文件名能访问到该文件
  - 配置完毕即可通过web-view加载外部网页了
  - 在外部网页可通过window.__wxjs_enviroment === 'miniprogram'来判断是否是小程序环境
- bindMessage，网页向小程序postMessage时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息；e.detail = { data }