以下是對與檢視容器元件（ScrollView和Swiper）的簡要使用說明

一、scroll-view

1、基本設定

首先是參考的開發文件網址
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/
新建一個wxml檔案，新增scroll-view元件，元件中新增“綠、紅、黃、藍”四種顏色的view元件（view元件較為簡單，與html中div類似，此處省略，可參考官方開發文件中對view元件的說明）

需要注意的是在這裡只是添加了每個view元件的id和class，還需要再wxss檔案中新增其樣式
這裡設定scroll-view元件為豎向滾動，使用豎向滾動時，需要給<scroll-view/>

<scroll-view style="height:250px" scroll-y="true">
  <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>

以下是wxss中對樣式的設定，.scroll-view-item 對4個view元件同時設定高度為200px，.bc_green 等分別設定每個元件不同的背景顏色。

.scroll-view-item {
  height: 200px;
}

.bc_green {
  background-color: green;
}

.bc_red {
  background-color: red;
}

.bc_yellow
 
 {
  background-color: yellow;
}

.bc_blue {
  background-color: blue;
}

2、滾動響應事件

以下分別說明bindscrolltoupper（滾動到頂部/左邊觸發）、bindscrolltolower（滾動到底部/右邊觸發）、
bindscroll（滾動時觸發）三個事件響應

將wxml檔案改寫為如下

<scroll-view style="height:250px" scroll-y="true" 
  bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" >
  <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>

為bindscrolltoupper、bindscrolltolower、bindscroll屬性新增名為“upper、lower、scroll”的function
在.js檔案中新增響應

Page({
  upper: function (event) {
    console.log("to top now");
  },
  lower: function (event) {
    console.log("to low now");
  },
  scroll: function (event) {
    console.log("scrolling now");
  }
})

滾動時就能看到Console視窗中顯示出log內容

3、scroll-into-view 與 scroll-top

scroll-into-view屬性，值應為某子元素id（id不能以數字開頭）。設定哪個方向可滾動，則在哪個方向滾動到該元素
scroll-top屬性，值為豎向滾動條滾動到的位置

為scroll-view元件新增scroll-into-view與scroll-top屬性，並新增兩個button。

<scroll-view style="height:250px" scroll-y="true" 
scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
    ...
</scroll-view>
<view>
  <button bindtap="tap">click me to scroll into view</button>
  <button bindtap="tapMove">click me to scroll</button>
</view>

在.js中新增點選function——tap和tapMove
data中定義toView初始值為'red' ，滾動條開始與200px的位置

其中tap: function (e) {} 判斷當前toView 值與order[i] 值是否匹配，相同則將order[i + 1] 的值賦給toView ，即每次點選都將下一個顏色id傳給scroll-into-view 屬性。

tapMove: function (e) {} 將scrollTop 值自加10，即滾動條位置增加10。

var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
  data: {
    toView: 'red',
    scrollTop: 200
  },

  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
    })
  }
})

二、swiper

以下程式碼簡單設定了swiper的幾個基本屬性

<swiper indicator-dots="true" autoplay="true" current='1' interval='1000' duration='100' bindchange='change'>
  <swiper-item><view class="item bc_green">green</view></swiper-item>
  <swiper-item><view class="item bc_red">red</view></swiper-item>
  <swiper-item><view class="item bc_yellow">yellow</view></swiper-item>
  <swiper-item><view class="item bc_blue">blue</view></swiper-item>
</swiper>

Page({
  change:function(a) {
    console.log(a)
  }
})

以下簡單介紹swiper的wxss配置
以上wxml中<swiper-item> 元件僅可放置在<swiper/>元件中，寬高自動設定為100%。
這裡的100%為佔滿整個swiper，但值得注意的是，實際上若不設定height屬性，其顯示範圍僅僅為文字範圍，這裡可以為swiper新增一個邊框border 屬性來驗證，同時可以驗證，滑動時是整個swiper進行滑動，而不是其中的item滑動。

swiper {
  height: 200px;
}

swiper-item {
  border: 3px solid black;
}

.item {
  height: 50%;
  width: 50%;
  font-size: 48px;
  color: #fff;
}

.bc_green {
  background-color: green;
}

.bc_red {
  background-color: red;
}

.bc_yellow {
  background-color: yellow;
}

.bc_blue {
  background-color: blue;
}

一些bug和注意事項：

• 1.02版本中若用以上方法新增border會將view擠出螢幕，而不是覆蓋在view上。
• swiper元件中，雖然autoplay元件預設值為false，並且其值為布林型別，但是在1.02版本中只要寫上了autoplay屬性其值均為true，即使你<swiper autoplay='a'> 這樣寫，swiper仍然會自動播放。