05 初级组件

一，view

视图容器。

<view class="">

</view>

二，scroll-view

可滚动视图区域。

属性名	类型	默认值	说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许横向滚动
scroll-top	Number		设置竖向滚动条位置
scroll-left	Number		设置横向滚动条位置
upper-threshold	Number	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
bindscrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件

 <scroll-view scroll-y style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"  scroll-top="{{scrollTop}}">
    <view id="green" class="scroll-view-item bc_green"></view>
    <view id="red"  class="scroll-view-item bc_red"></view>
    <view id="yellow" class="scroll-view-item bc_yellow"></view>
    <view id="blue" class="scroll-view-item bc_blue"></view>
  </scroll-view>

三，button

按钮

属性名	类型	默认值	说明
size	String	default	按钮的大小
plain	Boolean	false	按钮是否镂空，背景色透明
size	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标
form-type	String		用于 组件，点击分别会触发 组件的 submit/reset 事件
hover-class	String	button-hover	指定按钮按下去的样式类。当 hover-class=”none” 时，没有点击态效果

<button  size="{{primarySize}}" 
        loading="{{loading}}" 
        plain="{{plain}}"
        bindtap="primary"> primary </button>

四，image

图片

属性名	类型	默认值	说明
src	String		图片资源地址
mode	String	‘scaleToFill’	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载。只针对page与scroll-view下的image有效

  <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>