微信小程序-开发组件-笔记1

Posted 2020-10-14 小仙女63

1.视图容器组件(view)

view组件代表了一个页面的基本视图，也就是一个新的页面的最外层容器，相当于html中的DIV容器。对于每一个微信小程序的控件而言，有一些属性是通用的。表1是一些通用的属性。

表1  view属性和说明

属性名	类型	描述	注释
Id	String	组件的唯一标识	保持整个页面唯一
class	String	组件的样式类	在对应的wxss中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否显示	所有组件默认显示
data-*	Any	自定义属性	组件上触发事件时，会发送给事件处理函数
bind*/catch*	EventHandler	组件的事件	不同的事件处理

 

2.可滚动视图区域(scorll-view)

属性及类型如表2所示:

表2  scroll-view属性

属性名	类型	默认值	说明
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：

表3  swiper的属性和类型说明

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示页面指示点
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所有页面的index
interval	Number	5000	自动切换时间间隔
duration	Number	1000	滑动动画时长
bindchange	EventHandle		current改变时会触发change事件