一、微信小程序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滚动到指定位置的详细介绍，希望对大家有所帮助。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/182202.html
微信扫一扫 
支付宝扫一扫 