微信小程序(3)——經常使用的組件

• view：

　　　　view是小程序中的視圖容器之一，似於html中的<div>標籤

<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

• image

　　　　image是小程序中的媒體組件，顧名思義就是圖片,相似於html中的<image>標籤

<view class="section__ctn">
        <image style="width: 200px; height: 200px;  src="../../demo.png"></image>
</view>

• text

　　　　text是小程序基礎內容中的文本，在小程序中除了該節點外其餘節點均沒法長按選中。

<view>
    <text>Hello world</text>    
</view>

• swiper

　　　　swiper是小程序中的滑塊視圖容器, 

<swiper indicator-dots="true" autoplay="true" interval="5000">
　　<!-- swiper-item能夠多個-->
　　<swiper-item>
      <image src="/images/1.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/2.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/3.png"></image>
    </swiper-item>
</swiper>

屬性名	類型	默認值	說明	最低版本
indicator-dots	Boolean	false	是否顯示面板指示點
indicator-color	Color	rgba(0, 0, 0, .3)	指示點顏色	1.1.0
indicator-active-color	Color	#000000	當前選中的指示點顏色	1.1.0
autoplay	Boolean	false	是否自動切換
current	Number	0	當前所在頁面的 index
interval	Number	5000	自動切換時間間隔
duration	Number	500	滑動動畫時長
circular	Boolean	false	是否採用銜接滑動
vertical	Boolean	false	滑動方向是否爲縱向
bindchange	EventHandle		current 改變時會觸發 change 事件，event.detail = {current: current, source: source}