微信小程序学习总结(四)

微信小程序学习总结(四)

一. 视图容器

1. view 视图容器

  属性名	                   类型	          默认值	                      说明
  hover-class             String	       none	         指定按下去的样式类。当 hover-class="none" 时，没有点击态效果	
  hover-stop-propagation  Boolean	      false	         指定是否阻止本节点的祖先节点出现点击态	1.5.0
  hover-start-time	      Number	        50	         按住后多久出现点击态，单位毫秒	
  hover-stay-time	      Number	        400	         手指松开后点击态保留时间，单位毫秒

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（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
 scroll-with-animation Boolean	                false	               在设置滚动条位置时使用动画过渡
 enable-back-to-top    Boolean	                false	               iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
 bindscrolltoupper	   EventHandle		                               滚动到顶部/左边，会触发 scrolltoupper 事件
 bindscrolltolower	   EventHandle		                               滚动到底部/右边，会触发 scrolltolower 事件
 bindscroll            EventHandle		                               滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

3. swiper 滑块视图容器

 属性名	                       类型	             默认值                       	说明
 indicator-dots	             Boolean            false	              是否显示面板指示点	
 indicator-color	         Color	            rgba(0, 0, 0, .3)	  指示点颜色
 indicator-active-color	     Color	            #000000	              当前选中的指示点颜色
 autoplay	                 Boolean	        false	              是否自动切换	
 current	                 Number	            0	                  当前所在滑块的 index	
 current-item-id	         String	            ""                 	  当前所在滑块的 item-id ，不能与 current 被同时指定
 interval	                 Number	            5000	              自动切换时间间隔	
 duration	                 Number	            500	                  滑动动画时长	
 circular	                 Boolean	        false	              是否采用衔接滑动	
 vertical	                 Boolean	        false	              滑动方向是否为纵向	
 previous-margin	         String	            "0px"	              前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
 next-margin	             String	            "0px"	              后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
 display-multiple-items	     Number	             1	                  同时显示的滑块数量
 skip-hidden-item-layout	 Boolean	         false	              是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
 bindchange	                 EventHandle		                      current改变时会触发 change 事件，event.detail = {current: current, source: source}	
 bindanimationfinish	     EventHandle		                      动画结束时会触发 animationfinish 事件，event.detail

4. movable-view 支持移动和缩放的容器

 属性名	                类型	             默认值	                说明
 scale-area	          Boolean	             false	       当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area
 direction	          String	             none	       movable-view的移动方向，属性值有all、vertical、horizontal、none
 inertia	          Boolean	             false	       movable-view是否带有惯性	
 out-of-bounds	      Boolean	             false	       超过可移动区域后，movable-view是否还可以移动	
 x	                  Number / String		               定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画	
 y	                  Number / String		               定义y轴方向的偏移，