小程序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滚动到指定位置的详细介绍，希望对大家有所帮助。