1. View

flex-direction:row:橫向佈局模式；如果不設定該屬性，預設為橫向

flex-direction:column:縱向佈局。

介面樣式程式碼

注意：1.如果想要改模式有效，父控制元件必須設定顯示方式為flex模式，display:flex;

           2.要想控制元件的背景顏色顯示出來，必須view設定大小，否則background-color屬性無效。

2.scroll-view

<view class="section">
  <view class="section__title">vertical scroll</view>
  <!--如果是垂直滾動，必須設定scrollview的高度，切記-->
  <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>
 

介面渲染程式碼：

.section {
  display: flex;
  flex-direction: column;
}
/*設定垂直滾動每個滑動塊高度*/
.scroll-view-item {
  height: 100px;
}
/*設定中間兩個按鈕的位置*/
.btn-area {
  height: 80px;
  justify-content: space-around;
  display: flex;
  flex-direction: column;
}
/*設定水平滾動檢視，該屬性必須設定為nowrap，表示超出範圍也不換行
white-white-space屬性的值
    normal: 自動換行(預設.內容超過父控制元件寬度換行)
    pre: 保持HTML原始碼的空格與換行,等同與pre標籤，識別空格和換行符
    nowrap: 不換行,超出範圍的隱藏
    pre-wrap: 同pre屬性,但是遇到超出容器範圍的時候會自動換行
    pre-line: 同pre屬性,但是遇到連續空格會被看作一個空格
    inherit: 繼承
*/
.scroll-view_H {
  white-space: nowrap;
}
/*設定水平滾動的所有元素的大小,view預設為塊元素，會自動換行，所以必須設定為行內元素*/
.scroll-view-item_H {
  width: 150px;
  height: 100px;
  display: inline-block; 
}
/*設定每個View的背景顏色*/
.bc_green {
  background-color: green;
}
.bc_red {
  background-color: red;
}
.bc_blue {
  background-color: blue;
}
.bc_yellow {
  background-color: yellow;
}
 

//logs.js
var util = require('../../utils/util.js')
var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
  data: {
    //元素的IDID，通過修改這個，實現點選把這個元素滾動到頂部
    toView: 'red',
    //預設你已經滾動的距離
    scrollTop: 100
  },
  upper: function(e) {
    console.log(e)
  },
  lower: function(e) {
    console.log(e)
  },
  scroll: function(e) {
    console.log(e)
  },
  //點選改變要滾動到頂部的元素ID
  tap: function(e) {
    for (var i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        //動態重新整理資料，向上滾動一頁
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },
  //點選一次滾動10
  tapMove: function(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})
 

3.swiper 主要用於圖片輪播，廣告banner的展示

介面渲染程式碼：

.btn {
  display: flex;
  flex-direction: column;
  height: 400px;
  justify-content: space-around;
  text-align: center;
}