小程式的基礎元件——檢視容器

1. view

基本上用來包裹其他元件

<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>
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp" style="height: 300px;flex-direction:column;">
    <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>
 

2. scroll-view

注意：使用豎向滾動時，需要給一個固定高度，通過 WXSS 設定 height。

index.wxml
<view class="section">
  <view class="section__title">vertical scroll</view>
<!--垂直滾動，這裡必須設定高度-->
  <scroll-view scroll-y="true" 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>

  <view class="btn-area">
    <button size="mini" bindtap="tap">click me to scroll into view </button>
    <button size="mini" bindtap="tapMove">click me to scroll</button>
  </view>
</view>
<view class="section section_gap">
  <view class="section__title">horizontal scroll</view>
  <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
    <view id="green" class="scroll-view-item_H bc_green"></view>
    <view id="red"  class="scroll-view-item_H bc_red"></view>
    <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
    <view id="blue" class="scroll-view-item_H bc_blue"></view>
  </scroll-view>
</view>
 

index.js
var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
  data: {
    toView: 'red',
    scrollTop: 100
  },
  upper: function(e) {
    console.log(e)
  },
  lower: function(e) {
    console.log(e)
  },
  scroll: function(e) {
    console.log(e)
  },
  tap: function(e) {
    for (var i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },
  tapMove: function(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})
 

index.wxss
.scroll-view-item{
  height: 100px;
}

<!--  white-space
  normal: 正常無變化(預設處理方式.文字自動處理換行.假如抵達容器邊界內容會轉到下一行)
  pre: 保持HTML原始碼的空格與換行,等同與pre標籤
  nowrap: 強制文字在一行,除非遇到br換行標籤
  pre-wrap: 同pre屬性,但是遇到超出容器範圍的時候會自動換行
  pre-line: 同pre屬性,但是遇到連續空格會被看作一個空格
  inherit: 繼承
-->

.scroll-view_H{
  white-space: nowrap;
  display: flex;
}

.scroll-view-item_H{
    height: 100px;
    width: 200px;
    display: inline-block;
}

#green{
  background: green;
}

#yellow{
  background: yellow;
}

#red{
  background: red;
}

#blue{
  background: blue;
}

3. swiper 圖片輪播元件

基本屬性

index.wxml
<!--是否顯示圓點，自動播放，間隔時間，監聽滾動和點選事件-->
<swiper indicator-dots="true" autoplay="true" duration="1000" bindchange="listenSwiper" >
<!--注意：其中只可放置<swiper-item/>元件，否則會導致未定義的行為-->
<!--swiper-item只能包含一個節點再多會自動刪除-->
    <swiper-item>
        <view style="background: red; height: 150px"></view>
    </swiper-item>
    <swiper-item>
         <view style="background: green; height: 150px"></view>
    </swiper-item>
        <swiper-item>
          <view style="background: blue; height: 150px"></view>
    </swiper-item>    
</swiper>