视图容器

view

可滚动视图区域

scroll-view

滑动视图容器

如图所示：

（可以用来制作轮播图）

swiper

<swiper
    bindchange="changeSwiper"
    previous-margin='10rpx'
    next-margin='10rpx'
    interval='3000' circular='true' autoplay='true' 
    indicator-dots='true' indicator-color='red' 
    indicator-active-color='yellow'>
    <swiper-item item-id="item" wx:for="{{picSource}}" wx:for-item="item" wx:key="unique">
        <image src="{{item.link}}"></image>
    </swiper-item>
</swiper>

Page({
  data: {
      picSource: [
          {
              link: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'
          },
          {
              link: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'
          },
          {
              link: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
          }
      ]
  },
  changeSwiper : function() {
      console.log("滑动了！！")
  }
})

movable-area

是 movable-view的可移动区域

• 必须设置宽高，，不设置默认为10px

• 属性名： scale-area 当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area

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

<movable-area 
        scale-area="true" 
        style="background-color: rgba(255,0,0,0.1);width: 750rpx;height: 500rpx;">
        <movable-view
                  bindchange="changing" 
                  out-of-bounds="true"
                  inertia="true" direction="all" 
                  scale="true"
                  style="background-color: green;width: 50rpx;height: 50rpx;" >
    </movable-view>
</movable-area>

changing : function(e){
  /*
    其中有一个detail属性，可以显示当前滑块在滑块区域内的坐标值
  */ 
  console.log(e);
  console.log("我正在运动！！！");
 }

cover-view

覆盖在原生组件上的文本视图。

可覆盖的原生组件包括：map、video、canvas、camera。

只支持嵌套cover-view、cover-image。

<map>
    <cover-view>这是一张地图
        <cover-image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"></cover-image>
    </cover-view>
</map>
<!-- map是地图，cover-view的内容将显示在map上 -->

<video id="myVideo"  src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls="{{false}}" event-model="bubble">
   <cover-view class="controls">
        <cover-view class="play" bindtap="play">
            <cover-image class="img" src="/path/to/icon_play" /> 
        </cover-view>
    <cover-view class="pause" bindtap="pause">
        <cover-image class="img" src="/path/to/icon_pause" /> 
    </cover-view>
    <cover-view class="time">00:00</cover-view>
    </cover-view> 
</video>

play() {
      this.videoCtx.play()
},
pause() {
  this.videoCtx.pause()
 }

icon 图标

    <view><icon type="success" size='30' color="red" /></view>
    <view><icon type="success_no_circle" size='35' color="green" /></view>
    <view><icon type="info" size='45' color='yellow' /></view>
    <view><icon type="warn" size='30' color="blue" /></view>
    <view><icon type="waiting" color="hotpink" /></view>
    <view><icon type="cancel" color="skyblue" /></view>
    <view><icon type="download" color="blue" /></view>
    <view><icon type="search" color="blue" /></view>
    <view><icon type="clear" color="blue" /></view>

text 文本

注意：

decode可以解析    < > & '    。

progress 进度条

<progress style="margin-top: 20rpx;"></progress>
<progress style="margin-top: 20rpx;" percent='20' show-info='true'></progress>
<progress style="margin-top: 20rpx;" percent='40' color="pink"></progress>
<progress style="margin-top: 20rpx;" percent='60' active="true"></progress>
<progress style="margin-top: 20rpx;" percent='80' stroke-width='25'></progress>

button 按钮

<button loading='true' type="primary" size="default"></button> -->

<button size="mini" type="warn" disabled='true' plain="true" >按钮a</button>

<button size="default" type="warn" form-type='share'>按钮a</button>

<button size="default" type="default" open-type=''>按钮a</button>

<button size="default" type="primary" 
        hover-class='hovering'
        hover-start-time='500'
        hover-stay-time='500'
        hover-stop-propagation='' hover-class=''>按钮a</button> 

checkbox-group

利用bindchange事件，当其中的checkbox状态发生变化时，就会触动事件，且，其中该事件的event中有个detail属性，中的value属性是一个数组。选中了的checkbox的数组

    <checkbox-group bindchange="changecheck">
        <checkbox value='aaa'></checkbox>aaa
        <checkbox checked='true' value='bbb'></checkbox>bbb
        <checkbox value='ccc'></checkbox>ccc
        <checkbox value='ddd'></checkbox>ddd
        <checkbox value='eee'></checkbox>eee
        <checkbox value='fff'></checkbox>fff
    </checkbox-group>

form表单

使用form表单，有bindsubmit和bindreset两个事件。

1. 当form表单中formType为reset的按钮被点击时，会触动form表单的reset事件
2. 当form表单中formType为submit的按钮被点击时，会触动form表单的submit事件
   会将表单组件的value值进行提交，且表单组件必须要有name属性的才能被提交，否则就不会有
3. bindsubmit事件中的event中有个detail属性中有携带的数据的详细信息

<form bindsubmit='formSubmit' bindreset='formReset'>
      <view>用户名：
          <input name="username" placeholder='请输入用户名' />        
      </view>
      <switch name="gender" />男
      <button formType="reset">reset</button>
      <button formType="submit">submit</button>
</form>