微信小程序之----組件

1.view

把文檔分割為獨立的、不同的部分。

view組件類似於html中的div標簽，默認為塊級元素，獨占一行，可以通過設置display:inline-block改為行級元素。

• view.wxml代碼如下：

<view class="outerView">
    <view class="innerView1"></view>
    <view class="innerView2"></view>
    <view class="innerView3"></view>
<view>

• view.wxss代碼如下

.outerView{
    width:100%;height: 100px;margin: 0 auto;background-color: brown; 
}
.innerView1{
    width: 40%;height: 40px;background: blue;display: inline-block;
}
.innerView2{
    width: 40%;height: 40px;background: yellow;display: inline-block;
}
.innerView3{
    width: 40%;height: 40px;background: peru;
}

• 顯示效果：

2.scroll-view

可滾動（點擊滑動）視圖區域。

• 官方給出的屬性列：

•  scroll-view.wxml代碼如下：

<view class="section">
    <scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper"
     bindscrolltolower="lower" bindscroll="scroll" lower-threshold="50"  scroll-into-view="{{toView}}"
      scroll-top="1000px">
        <view id="green" class="scroll-view-item bc_green" style="width:100px;height:100px;background:red"></view>
        <view id="red"  class="scroll-view-item bc_red" style="width:100px;height:100px;background:blue"></view>
        <view id="yellow" class="scroll-view-item bc_yellow" style="width:100px;height:100px;background:yellow"></view>
    </scroll-view>
</view>
<view class="section section_gap">
    <scroll-view class="scroll-view_H" scroll-x="true" style=" white-space: nowrap" >
        <view id="green" style="width:400px;height:100px;background:red;display: inline-block"></view>
        <view id="red"  style="width:400px;height:100px;background:blue;display: inline-block"></view>
    </scroll-view>
</view>

• scroll-view.js代碼如下：

Page({
  data: {
    toView: "red",//設置初始滑動區頂部顯示的view，可通過this.setdata({toView:"blue"})來改變
    scrollTop: 10,
    threshold:0
  },
  upper: function(e) {
    console.log("到達頂部")
  },
  lower: function(e) {
    console.log("到達底部")
  },
  scroll: function(e) {
    console.log("一次滑動結束")
  }
})

• 運行效果：

 

3.swiper

滑動面板，定時滑動切換圖片或手動滑動切換圖片。

• swiper.wxml

<!--indicator-dots是否顯示圓點，autoplay自動播放，current初始顯示的item（0代表第一個item）, duration滑動速度， bindchange監聽滾動和點擊事件，interval滑動間隔時間-->
<swiper indicator-dots="true" autoplay="true" current="1" duration="1000" bindchange="listenSwiper" interval="2000">
<!--swiper-item只能包含一個節點再多會自動刪除-->
   
    <swiper-item>
        <view style="height: 150px"><image src="../../pic/pic2.png" style="width:100%;height:100%"/></view>
    </swiper-item>
    <swiper-item>
         <view style="height: 150px"><image src="../../pic/pic1.png" style="width:100%;height:100%;"/>
         </view>
    </swiper-item>
     <swiper-item>
          <view style="height: 150px"><image src="../../pic/pic3.png"  style="width:100%;height:100%;"/>
          </view>
    </swiper-item> 
</swiper>

• 運行效果：

4.icon，text，progress，checkbox，input，readio-group，slider，switch

<!-- type=[ 'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',
'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',
'info_circle', 'cancel', 'search', 'clear'] -->
<icon type="success" size="23" color="red"/>
<view><text>可以長按選中</text></view>
<!-- percent:百分比，active:是否顯示從左往右的動畫（但是經過測試無論設置為true還是false動畫都會顯示，去掉該屬性則不顯示動畫），showInfo：是否顯示百分比，strokeWidth：進度條寬度 -->
<progress percent="100" active="false" showInfo="true" strokeWidth="7" />
<!-- type：[primary, default, warn],size:[default,mini],loading:按鈕前是否帶loading圖標,plain:按鈕是否鏤空，disabled：是否生效，formType:[submit,reset],hover-class:按下時的樣式類名 -->
<button type="warn" size="mini" loading="true" plain="true" disabled="true" bindtap="default" formType="reset" hover-class="none"> default </button>
<!-- disabled:不可選中，value：當value改變時觸發bindchange綁定的函數 -->
<checkbox-group bindchange="checkboxChange">
    <label class="checkbox" wx:for-items="{{[1,2,3,4,5]}}">
        <checkbox value="{{item}}" checked='false' disabled="true"/>{{item}}
    </label>
</checkbox-group>

<input placeholder="禁用了的input" value="禁用了的input" type="text" auto-focus/>

<radio-group bindchange="test">
    <label class="radio" wx:for-items="{{[1,2,3,4]}}">
        <radio value="{{item}}" checked="true"/>{{item}}
    </label>
</radio-group>

<!-- disabled:禁用無法滑動，step:步長如果設置為2則顯示value為50 52 54...
     show-value:是否顯示當前值
 -->
<slider bindchange="test" min="50" max="200" show-value step="2"/>

<!-- type:[checkbox,switch]兩種樣式，disabled,checked -->
<switch checked="true" bindchange="test" type="checkbox"/>
<switch checked="true" bindchange="test" type="switch"/>