知曉程式設計師，專注微信小程式開發的程式設計師！

前言：近期小程式專案中用到了滾動條功能，官方文件中提供兩種方式。即wx.pageScrollTo滾動到page頁面的指定位置，<scroll-view>元件可以設定scroll-top或者scroll-left的值，今天探討一下使用哪種方式更合適。

1、wx.pageScrollTo

官方文件地址：https://mp.weixin.qq.com/debug/wxadoc/dev/api/scroll.html

示例程式碼：

wx.pageScrollTo({
  scrollTop: 0
})

使用此方式，你需要知道以下幾點：

1、小程式基礎庫1.4.0之前不支援此方法，這點兒比較坑

2、小程式中雙擊頂部的textbar，會預設回到頂部

3、能夠觸發page的上拉(ReachBottom)和下拉(PullDownRefresh)事件

4、當頁面中有使用position:fixed佈局時，彈出鍵盤時，fixed佈局部分會閃屏

2、<scroll-view>

小程式中另一種實現滾動條的方式，是使用scroll-view元件。官方文件：https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html

詳細的引數，請仔細檢視官方文件~

示例程式碼：

<scroll-view class="scroll-view" scroll-y style="height: 500px;" scroll-top="{{scrollTop}}">
  <view id="green" class="bc_green"></view>
  <view id="red"  class="bc_red"></view>
  <view id="yellow" class="bc_yellow"></view>
  <view id="blue" class="bc_blue"></view>
</scroll-view>
 

使scroll-view元件方式，你需要知道以下幾點：

1、縱向滾動(scroll-y)時，必須設定height值，並且不能使用css中的calc來計算，scroll-top值才會生效

2、小程式中雙擊頂部的textbar，無法回到頂部

3、無法觸發page的上拉(ReachBottom)和下拉(PullDownRefresh)事件

4、當頁面中position:fixed佈局不受影響