微信小程序学习笔记（二）UI设计

UI设计

.wxml

一.视图容器

1.view

①属性

属性	类型	默认值	说明
hover	Boolean	false	是否单击态
hover-class	String	none	指定按下去的样式类
hover-start-time	Number	50ms	按住后多久出现单击态
hover-stay-time	Number	400ms	手指松开后单击态保留时间

2.scroll-view可滚动视图

滚动条

②属性

属性	类型	默认值	说明
scroll-x	boolean	false	允许横向滚动
scroll-y	boolean	false	允许纵向滚动
upper-threshold	number	50ms	距顶/左多远时触发事件
lower-threshold	number	50ms	距底/右多远时触发事件
scroll-top	number		设置竖向滚动条位置
scroll-left	number		设置横向滚动条位置
scorll-into-view	string		值应为某子元素id，则滚动到该元素，元素顶部对其滚动区域顶部
bindscrolltoupper	事件		滚动到顶/左边，触发事件
bindscrolltolower	事件		滚动到底/右边，触发事件
bindscroll	事件		滚动时触发

3.swiper滑块视图

切换显示内容，轮播和切换效果

海报轮播和页签轮换

①属性

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面板指示点
autoplay	boolean	flase	是否自动切换轮播
current	number	0	当前所在页面的index
interval	number	5000	自动切换时间间隔
duration	number	500	滑动动画时长
circular	boolean	false	是否采用衔接滑动
bindchange	事件		current改变时会触发

4.movable-view可移动视图

页面中可以拖拽滑动

要先定义可移动区域movable-area，在定义直接子节点movable-view，否则不能移动

movable-area和movable-view必须设置width和height，默认10px

默认绝对定位，顶和左属性0px

①属性

属性	类型	默认值	说明
direction	string	none	movable-view的移动方向，属性值右all、vertical、horizontal、none
inertia	boolean	false	movable-view是否带有惯性
out-of-bounds	boolean	false	超过可移动区域后，movable-view是否还可以移动
x	number		定义x轴方向的偏移
y	number		y
damping	number	20	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画
friction	number	2	摩擦系数，用于控制惯性滑动的动画
disabled	boolean		是否禁用
scale	boolean		是否支持双指缩放
scale-min	number		定义缩放倍数最小值
scale-max	number		定义缩放倍数最大值
scale-value	number		定义缩放倍数，0.5~10
bindchange	事件		拖动过程中触发的事件
bindscale	事件		缩放过程中触发的事件

5.cover-view覆盖原生组件视图

cover-view覆盖在原生组件上的文本视图

cover-image覆盖在原生组件上的图片视图

①属性

cover-view

属性	类型	默认值	说明
scroll-top	number/string		设置顶部滚动偏移量

cover-image

属性	类型	默认值	说明
src	string		路径
bindload	事件		图片加载成功触发
binderror	事件		失败