什麼是元件？

• 元件是檢視層的基本組成單元。
• 元件自帶一些功能與微信風格一致的樣式。
• 多個元件構成一張試圖頁面
• 每個元件都包含一些公用屬性（class、id、style...）
• 一個元件通常包括 開始標籤 和 結束標籤，屬性 用來修飾這個元件，內容 在兩個標籤之內。

一、基礎元件分為以下七大類：

1、檢視元件

  1.1、view

  view元件的常用屬性：

• hover-class：指定按下去的樣式類
• hover-start-time：按住後多久出現點選態，單位毫秒
• hover-stay-time：手指鬆開後點擊態保留時間，單位毫秒

<view hover-class='d' hover-start-time='10' hover-stay-time='2000'>內容</view>
 

1.2、scroll-view（可滾動檢視區域）

• scroll-view元件的常用屬性：
• scroll-view：允許縱向滾動（true / false）
• scroll-top：設定豎向滾動條位置（Number）
• scroll-with-animation：在設定滾動條位置時使用動畫過渡（true / false）
• enable-back-to-top：iOS點選頂部狀態列、安卓雙擊標題欄時，滾動條返回頂部，只支援豎向（得在真機上使用）（true / false）
• upper-threshold：距頂部/左邊多遠時（單位px），觸發 scrolltoupper 事件，預設值是50px
• lower-threshold
  ：距底部/右邊多遠時（單位px），觸發 scrolltolower 事件，預設值是50px
• scroll-into-view：值應為某子元素id（id不能以數字開頭）。設定哪個方向可滾動，則在哪個方向滾動到該元素（id名）
• bindscrolltoupper：滾動到頂部/左邊，會觸發 scrolltoupper 事件（scrolltoupper）
• bindscrolltolower：滾動到底部/右邊，會觸發 scrolltolower 事件（scrolltolower ）
• bindscroll：滾動時觸發
• 豎向可滾動區域

  <scroll-view scroll-y="true" scroll-top="50" scroll-with-animation="true" bindscrolltoupper="scrolltoupper" bindscrolltolower="scrolltolower" upper-threshold="0" lower-threshold="0" enable-back-to-top="true" scroll-into-view = 'c' enable-back-to-top='true' bindscroll="scroll">
    <view id='a' class='a size'>a</view>
    <view id='b' class='b size'>b</view>
    <view id='c' class='c size'>c</view>
    <view id='d' class='d size'>d</view>
    <view id='e' class='e size'>e</view>
  </scroll-view>
   
  

  橫向可滾動區域

  <scroll-view class='container' scroll-x="true" style='margin-top:250rpx;'  scroll-left='350'>
    <view id='a' class='a size'>a</view>
    <view id='b' class='b size'>b</view>
    <view id='c' class='c size'>c</view>
    <view id='d' class='d size'>d</view>
    <view id='e' class='e size'>e</view>
  </scroll-view>

  橫向scroll-view需要在樣式裡設定：white-space: nowrap;和display: inline-block;

 1.3、swiper（滑塊檢視容器）

實現跟輪播圖一樣的效果

swiper元件的常用屬性：

• indicator-dots：是否顯示面板指示點（預設false）
• indicator-color：指示點顏色（預設rgba(0, 0, 0, .3)）
• autoplay：是否自動切換（預設false）
• duration：滑動動畫時長（預設500毫秒）
• interval：自動切換時間間隔

注意：swiper裡只可放置<swiper-item/>元件，否則會導致未定義的行為。

swiper-item

僅可放置在<swiper/>元件中，寬高自動設定為100%。

swipter-item屬性：item-id 

<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>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration

Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function (e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function (e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function (e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

 1.3、movable-area和movable-view

movable-area：mova-view的可以的區域

movable-view：可移動的檢視容器，在頁面中可以拖拽滑動

movable-view的常用屬性：

• direction：movable-view的移動方向，屬性值有all、vertical、horizontal、none
• inertia：movable-view是否帶有慣性（false / true）
• out-of-bounds：超過可移動區域後，movable-view是否還可以移動（false / true）
• x：定義y軸方向的偏移，如果y的值不在可移動範圍內，會自動移動到可移動範圍；改變y的值會觸發動畫
• y：同 x
• damping：阻尼係數，用於控制x或y改變時的動畫和過界回彈的動畫，值越大移動越快（預設值是20）
• friction：摩擦係數，用於控制慣性滑動的動畫，值越大摩擦力越大，滑動越快停止；必須大於0，否則會被設定成預設值（預設值是2）
• bindchange：拖動過程中觸發的事件
• scale：是否支援雙指縮放，預設縮放手勢生效區域是在movable-view內
• bindscale：縮放過程中觸發的事件

<movable-area class='father-size'>

  <movable-view class='size d' direction='all' inertia='false' out-of-bounds='false' x='50' y='100' damping='20' friction='2' bindchange='change' scale='true' bindscale='scale'>
  </movable-view>

</movable-area>

Page({
  data:{
  },
  change:function(){
    // console.log('我被移動了...')
  },
  scale:function(){
    console.log('我被縮放了...')
  }

})

2、基礎元件（內容）

2.1、icon（圖示）

icon的屬性：

• type：icon的型別，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
• size：icon的大小，單位px（預設值是23，注意不用寫單位）
• color：icon的顏色，同css的color

示例：

<icon type='success' size='66'></icon>
<icon type='success_no_circle' size='66'></icon>
<icon type='info' size='66'></icon>
<icon type='warn' size='66'></icon>
<icon type='waiting' size='66'></icon>
<icon type='cancel' size='66'></icon>
<icon type='download' size='66'></icon>
<icon type='search' size='66'></icon>
<icon type='clear' size='66'></icon>

<view class='group'>
  <block wx:for='{{iconsize}}'>
    <icon type='success' size='{{item}}'></icon>
  </block>
</view>

<view class='group'>
  <block wx:for='{{icontype}}'>
    <icon type='{{item}}' size='30'></icon>
  </block>
</view>

<view class='group'>
  <block wx:for='{{iconcolor}}'>
    <icon type='success' size='30' color='{{item}}'></icon>
  </block>
</view>

js程式碼：

Page({
  data:{
    iconsize:[20,30,40,50,60,70],
    icontype: ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search','clear'],
    iconcolor:['red','green','blue','yellow','grey','pink','purple']
  },
  
})

2.2、text（文字）

屬性：

selectable：文字是否可選（預設false）

space：顯示連續空格（這個屬性最後顯示出來的是一個空格，與屬性說明有出入）

decode：是否解碼（可以解析的有 &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp; ，將其顯示為' ' , '<' ,'>' , ’&' , ' ‘ '’）

2.3、rich-text（富文字）

屬性：

nodes 屬性推薦使用 Array 型別，由於元件會將 String 型別轉換為 Array 型別，因而效能會有所下降

nodes

現支援兩種節點，通過type來區分，分別是元素節點和文字節點，預設是元素節點，在富文字區域裡顯示的HTML節點

元素節點：type = node

示例：

wxml程式碼

<rich-text nodes='{{mycontent}}'></rich-text>
<rich-text nodes='{{mycontent2}}'></rich-text>

js程式碼

Page({
  data:{
    mycontent:'<img width="300" height="90" src="//img-ads.csdn.net/2018/201809111436174642.png">',
    mycontent2:[{
      name:'img',
      attrs:{
        width: '300',
        height: '90',
        src: '//img-ads.csdn.net/2018/201809111436174642.png'
      },
      
    }]
  },
  
})

mycontent和mycontent2使用兩種形式來繫結內容

2.4、progress（進度條）

<progress percent='35' show-info='{{true}}' stroke-width='20' activeColor='yellow' backgroundColor='grey'></progress>

<progress percent='{{mypercent}}' show-info='{{true}}' stroke-width='20' activeColor='red' backgroundColor='grey' active='true' active-mode='forwards'></progress>
<view bindtap='addProgress'>點選</view>

Page({
  data:{
    mypercent: 35,
  },
  
  addProgress:function(){
    var newPercent = this.data.mypercent+20;
    this.setData({
      mypercent: newPercent,
    })
  }