视图容器组件

视图容器组件包括view、scroll-view、swiper及swiper-item，主要用于控制视图样式与内容展现。

1.View

View是最常用的视图容器组件，相当于HTML页面的<div>标签。view组件具有如下属性：

• flex-direction:row/column 控件沿主轴排列方向

2.scroll-view

可滚动视图区域组件的属性

使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过WXSS设置height。

<scroll-view scroll-y style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" 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>

注意:
■请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
■scroll-into-view 的优先级高于 scroll-top
■ 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
■ 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

3.swiper

滑块视图容器组件的属性

注意
其中只可放置<swiper-item/>组件，否则会导致未定义的行为.
swiper-item
swiper-item为滑块项组件，仅可放置在<swiper/>组件中，宽高自动设置为100%。
示例代码如下：

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>

■如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。

4.movable-view

可移动的视图容器，在页面中可以拖拽滑动

除了基本事件外，movable-view提供了两个特殊事件

注意：movable-view必须在<movable-area/>组件中，并且必须是直接子节点，否则不能移动。

movable-area
movable-view 的可移动区域

注意：movable-area 必须设置width和height属性，不设置默认为10px

<view class="section">
  <view class="section__title">movable-view区域小于movable-area</view>
  <movable-area style="height: 200px; width: 200px; background: red;">
    <movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">
    </movable-view>
  </movable-area>
  <view class="btn-area">
    <button size="mini" bindtap="tap">click me to move to (30px, 30px)</button>
  </view>
  <view class="section__title">movable-view区域大于movable-area</view>
  <movable-area style="height: 100px; width: 100px; background: red;">
    <movable-view style="height: 200px; width: 200px; background: blue;" direction="all">
    </movable-view>
  </movable-area>
  <view class="section__title">可放缩</view>
  <movable-area style="height: 200px; width: 200px; background: red;" scale-area>
    <movable-view style="height: 50px; width: 50px; background: blue;" direction="all" bindchange="onChange" bindscale="onScale" scale scale-min="0.5" scale-max="4" scale-value="2">
    </movable-view>
  </movable-area>
</view>

Page({
  data: {
    x: 0,
    y: 0
  },
  tap: function(e) {
    this.setData({
      x: 30,
      y: 30
    });
  },
  onChange: function(e) {
    console.log(e.detail)
  },
  onScale: function(e) {
    console.log(e.detail)
  }
})

5.cover-view

覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera，只支持嵌套cover-view、cover-image。

cover-image
覆盖在原生组件之上的图片视图，可覆盖的原生组件同cover-view，支持嵌套在cover-view里。

基础内容组件

1.icon

图标。

2.text

文本

■decode可以解析的有   < > & '    
■各个操作系统的空格标准并不一致。
■<text/> 组件内只支持 <text/> 嵌套。
■除了文本节点以外的其他节点都无法长按选中。

3.rich-text

富文本。

nodes 属性推荐使用 Array 类型，由于组件会将 String 类型转换为 Array 类型，因而性能会有所下降

nodes
现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点

■nodes 不推荐使用 String 类型，性能会有所下降。
■ rich-text 组件内屏蔽所有节点的事件。
■attrs 属性不支持 id ，支持 class 。
■ name 属性大小写不敏感。
■如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。
■ img 标签仅支持网络图片。
■如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。

4.progress

进度条。

表单组件

1.button

按钮。

2.checkbox

多选项目。

checkbox-group
多项选择器，内部由多个checkbox组成。

属性名 |类型 |说明
bindchange |EventHandle |<checkbox-group/>中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}">
    <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</checkbox-group>

Page({
  data: {
    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英国'},
      {name: 'TUR', value: '法国'},
    ]
  },
  checkboxChange: function(e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  }
})

3.form

表单，将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。

当点击 <form/> 表单中 formType 为 submit 的 <button/> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

4. input

输入框。

5.label

用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。

for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。

目前可以绑定的控件有：<button/>, <checkbox/>, <radio/>, <switch/>。

6.picker

从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

7.picker-view

嵌入页面的滚动选择器

注意：其中只可放置<picker-view-column/>组件，其他节点不会显示。

8.radio

单选项目

radio-group
单项选择器，内部由多个<radio/>组成

9.slider

滑动选择器。

10.switch

开关选择器。

11.textarea

多行输入框。

互动操作组件

1.action-sheet

action-sheet是从屏幕底部出现的菜单表的组件，具有bindchange属性，类型为EventHandle，点击背景或action-sheet-cancel按钮时触发change事件，不携带数据。

action-sheet-item为action-sheet的子选项，即底部菜单表的子选项组件。action-sheet-cancel为底部菜单表的取消按钮组件，同<action-sheet-item/>组件的区别是，点击它会触发<action-sheet/>的change事件，并且外观上会同它上面的内容间隔开来。

// action-sheet.wxml   
 <button type="default" bindtap="actionSheetTap">弹出action sheet</button>    
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">     
 <block wx:for="{{actionSheetItems}}">        
<action-sheet-item class="item" bindtap="bindItemTap" data-name="{{item}}">          {{item}}</action-sheet-item>      </block>     
 <action-sheet-cancel class="cancel">取消</action-sheet-cancel>   
 </action-sheet>  

  // action-sheet.js   
 Page({      
data:{        actionSheetHidden: true,        actionSheetItems: ['item1', 'item2', 'item3', 'item4']      },      
actionSheetTap: function(e) {        
this.setData({          actionSheetHidden: ! this.data.actionSheetHidden        })    
  },     
 actionSheetChange: function(e) {        
this.setData({          actionSheetHidden: ! this.data.actionSheetHidden        })     
 },    
  bindItemTap:function(e){        console.log('tap ' + e.currentTarget.dataset.name)      }    
})

2.modal

modal为模态弹窗组件，具有如下属性：

    // modal.wxml    <modal title="标题" confirm-text="confirm" cancel-text="cancel" hidden="{{modalHidden}}"      bindconfirm="modalChange" bindcancel="modalChange">      // 这是对话框的内容。    </modal>    <modal class="modal" hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2">
      <view> 内容可以插入节点 </view>    </modal>    <view class="btn-area">      <button type="default" bindtap="modalTap">点击弹出modal</button>      <button type="default" bindtap="modalTap2">点击弹出modal2</button>    </view>    // modal.js    Page({      data: {        modalHidden: true,        modalHidden2: true      },      modalTap: function(e) {        this.setData({          modalHidden: false        })      },      modalChange: function(e) {        this.setData({          modalHidden: true        })      },      modalTap2: function(e) {        this.setData({          modalHidden2: false        })      },      modalChange2: function(e) {        this.setData({          modalHidden2: true        })      },    })

3.toast

toast是消息提示框组件，具有如下属性：

// toast.wxml    <view class="body-view">      <toast hidden="{{toast1Hidden}}" bindchange="toast1Change">        默认      </toast>      <button type="default" bindtap="toast1Tap">点击弹出默认toast</button>    </view>    <view class="body-view">      <toast hidden="{{toast2Hidden}}" duration="3000" bindchange="toast2Change">        设置duration      </toast>      <button type="default" bindtap="toast2Tap">点击弹出设置duration的toast</button>    </view>    // toast.js    var toastNum = 2    var pageData = {}    pageData.data = {}    for(var i = 0; i <= toastNum; ++i) {      pageData.data['toast'+i+'Hidden'] = true      ;(function (index) {        pageData['toast'+index+'Change'] = function(e) {          var obj = {}
          obj['toast'+index+'Hidden'] = true          this.setData(obj)        }        pageData['toast'+index+'Tap'] = function(e) {          var obj = {}          obj['toast'+index+'Hidden'] = false          this.setData(obj)        }      })(i)    }    Page(pageData)

4.loading

loading为加载提示组件。
示例代码如下：

// loading.wxml    
<view class="body-view">      <loading hidden="{{hidden}}" bindchange="loadingChange">        加载中．..      </loading>      <button type="default" bindtap="loadingTap">点击弹出loading</button>    </view>   
// loading.js    
Page({      data: {        hidden: true      },      loadingChange: function () {        this.setData({          hidden: true        })      },      loadingTap: function () {        this.setData({          hidden: false        })        var that = this        setTimeout(function () {          that.setData({            hidden: true          })
        }, 1500)      }    })

页面导航组件

navigator

页面链接。

页面路由的三个API方法：
■wx.navigateTo（OBJECT）：保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
■wx.redirectTo（OBJECT）：关闭当前页面，跳转到应用内的某个页面。
■wx.navigateBack()：关闭当前页面，回退至前一页面。

媒体组件

1.audio

音频。

2. image

图片。

注：image组件默认宽度300px、高度225px
mode 有效值：
mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

3. video

视频。

4.camera

系统相机。

5.live-player

实时音视频播放。

6.live-pusher

实时音视频录制。

地图

map

地图。

注意: covers 属性即将移除，请使用 markers 替代

画布

canvas
画布。