微信小程序-开发组件-笔记1
1.视图容器组件(view)
view组件代表了一个页面的基本视图,也就是一个新的页面的最外层容器,相当于HTML中的DIV容器。对于每一个微信小程序的控件而言,有一些属性是通用的。表1是一些通用的属性。
属性名 | 类型 | 描述 | 注释 |
Id | String | 组件的唯一标识 | 保持整个页面唯一 |
class | String | 组件的样式类 | 在对应的wxss中定义的样式类 |
style | String | 组件的内联样式 | 可以动态设置的内联样式 |
hidden | Boolean | 组件是否显示 | 所有组件默认显示 |
data-* | Any | 自定义属性 | 组件上触发事件时,会发送给事件处理函数 |
bind*/catch* | EventHandler | 组件的事件 |
不同的事件处理 |
2.可滚动视图区域(scorll-view)
属性及类型如表2所示:
属性名 | 类型 | 默认值 | 说明 |
scroll-x | Boolean | false | 允许横向滑动 |
scroll-y | Boolean | false | 允许纵向滑动 |
upper-threshold | Number | 50 | 距顶部/左边多远时(单位:px),触发scrolltoupper时间 |
lower-threshold | Number | 50 | 距顶底部/右边多远时(单位:px),触发scrolltolower时间 |
scroll-top | Number | 设置竖向滚动条位置 | |
scroll-left | Number | 设置横向滚动条位置 | |
scroll-into-view | String | 值应该为某子元素id,则滚动到该元素,元素顶部对齐滚动区域顶部 | |
bindscrolltoupper | EventHandle | 滚动到顶部/左边,会触发scrolltoupper事件 | |
bindscrolltolower | EventHandle | 滚动到底部/右边,会触发scrolltolower事件 | |
bindscroll | EventHandle | 滚动时触发,event.detail={scrollLeft,scrollTop,scrollHeight,scrollWidth,deltaX,delaY} |
3.滑动界面(swiper)
滑动界面区域具体属性如表3:
属性名 | 类型 | 默认值 | 说明 |
indicator-dots | Boolean | false | 是否显示页面指示点 |
autoplay | Boolean | false | 是否自动切换 |
current | Number | 0 | 当前所有页面的index |
interval | Number | 5000 | 自动切换时间间隔 |
duration | Number | 1000 | 滑动动画时长 |
bindchange | EventHandle | current改变时会触发change事件 |