微信小程序：scroll滑到指定位置

概述

這是我開發微信小程序遇到的坑中的一個，專門記錄下來，供以后開發時參考，相信對其他人也有用。

scroll滑到指定位置，有兩種解決方案，一種是用scroll-view標簽，另一種是用wx.pageScrollTo這個api。

用scroll-view標簽

這個標簽適合於屏幕內的小范圍滾動和錨點滾動，分別通過scroll-top和scroll-into-view這兩個標簽屬性來實現。注意這是標簽內屬性，所以需要動態改變的話，就需要用this.setData動態設置scroll-top和scroll-into-view的值。例子如下：

//wxml
<scroll-view scroll-y style="height: 200px;"" scroll-top="{{scrollTop}} scroll-into-view="{{toView}}">
    <view id="yellow" class="scroll-view-item bc_yellow"></view>
    <view id="blue" class="scroll-view-item bc_blue"></view>
  </scroll-view>

//wxs
Page({
  data: {
    toView: 'blue',
    scrollTop: 100
  }
})

這里有一個坑就是scroll-view一定要設置高度屬性，而且不能是百分比。所以為了使scroll-view自適應屏幕高度，我們一般用wx.getSystemInfo獲取屏幕高度，然后動態設置。例子如下：

//wxml
<scroll-view scroll-y="true" style="height:{{scrollHeight}}px;">

//wxs
var that = this;
wx.getSystemInfo({
      success: function (res) {
        that.setData({
          scrollHeight: res.windowHeight
        });
      }
    });

如果有其它需求的話，可以把上面的res.windowHeight換成各種運算。

用pageScrollTo方法

這種方法適用於屏幕的大范圍滾動，並且不支持錨點滾動。

wx.pageScrollTo方法和原生js方法有點類似，不過它是接受一個對象為參數。用法如下,把100改成想要的值即可。

wx.pageScrollTo({
  scrollTop: 100
})

但是這里有一個坑，就是這個方法不管是放在onLoad還是放在onReady或者onShow里面都是無效的，具體原因不明。所以一般運用就是用事件觸發。