小程序scrollview滾動到指定位置詳解

一、微信小程序scrollview橫向滾動

在微信小程序中，我們可以使用scroll-view標籤來創建一個可滾動的視圖容器。默認情況下，scroll-view是縱向滾動的，如果需要橫向滾動需要設置scroll-x屬性為true。

其中，scroll-x屬性小寫的”true”表示設置為橫向滾動，若設置為false，則表示縱向滾動。

二、微信小程序scrollview滾動到底部

當我們需要將scrollview滾動到底部時，可以通過調用scroll-view組件的scrollViewToLower方法實現。我們需要在scroll-view標籤上綁定一個scrolltolower事件：

  ...

然後在對應的Page.js中實現lower方法：

Page({
  lower: function (e) {
    console.log("滾動到底部了")
  }
})

當scrollview滾動到底部時，會自動觸發lower方法，然後我們就可以在方法裡面實現我們的具體邏輯。

三、小程序scrollview隱藏滾動條

在微信小程序中，滾動條是默認顯示的。如果不需要滾動條，可以通過設置css樣式來隱藏滾動條。

將scroll-view的style屬性設置為scrollbar:none即可隱藏滾動條。

四、小程序scrollview自動滾動

在scroll-view中，我們可以使用scroll-top屬性來控制滾動條的位置。如果需要實現自動滾動的效果，可以通過敲代碼的方式實現。

Page({
  data: {
    scrollTop: 0
  },
  onLoad: function () {
    var that = this
    setInterval(function () {
      that.setData({
        scrollTop: that.data.scrollTop + 10
      })
    }, 100)
  }
})

在頁面載入的時候，定義了一個setInterval方法，每100毫秒定期改變一下data中的scrollTop值，這樣就可以實現滾動條的自動滾動。

五、小程序scrollview不能滑動

有時候我們需要在scroll-view中嵌入一些小的元素，這些元素又可以滑動，此時需要禁用scroll-view的滑動，只允許嵌入元素的滑動。

  ...

將scroll-view的scroll-y屬性設置為false即可禁用滑動。

六、小程序scrollview橫向滾動

除了設置scroll-x屬性為true之外，我們還可以通過樣式實現scroll-view的橫向滾動。

我們可以為scroll-view增加一個class，並在該class中設置樣式：

.scroll-view-horizontal {
  white-space: nowrap;
  overflow-x: scroll;
  display: inline-block;
}

其中，white-space: nowrap表示不換行，overflow-x: scroll表示橫向滾動條可見，display: inline-block表示可以水平擺放。

七、小程序scrollview高度問題

有時候我們會發現scroll-view的高度不正常，此時可以通過設置scroll-view的高度來解決問題。

將scroll-view的style屬性設置為height:500px即可設置高度為500px。

八、小程序scrollview居中

有時候我們需要將scroll-view居中顯示，此時可以通過設置scroll-view的布局方式來實現。

我們將外部的view設置為display:flex;justify-content:center;height:100%;，表示將scroll-view居中顯示。

代碼示例

  



  ...



  



  



  



  
    
  

以上是關於小程序scrollview滾動到指定位置的詳細介紹，希望對大家有所幫助。