导航：首页 > 开发技术 >

微信小程序中scroll-view怎么用

发表于：2023-03-21 作者：安全数据网编辑

编辑最后更新 2023年03月21日，这篇文章主要为大家展示了"微信小程序中scroll-view怎么用"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"微信小程序中scroll-view怎么用"

这篇文章主要为大家展示了"微信小程序中scroll-view怎么用"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"微信小程序中scroll-view怎么用"这篇文章吧。

scroll-view

可滚动视图区域。

属性名	类型	默认值	说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top	Number		设置竖向滚动条位置
scroll-left	Number		设置横向滚动条位置
scroll-into-view	String		值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡
enable-back-to-top	Boolean	false	iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
bindscrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
bindscroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。

示例代码：

  vertical scroll          horizontal scroll

var order = ['red', 'yellow', 'blue', 'green', 'red']Page({  data: {    toView: 'red',    scrollTop: 100  },  upper: function(e) {console.log(e)  },  lower: function(e) {console.log(e)  },  scroll: function(e) {console.log(e)  },  tap: function(e) {for (var i = 0; i < order.length; ++i) {      if (order[i] === this.data.toView) {this.setData({          toView: order[i + 1]        })break  }    }  },  tapMove: function(e) {this.setData({      scrollTop: this.data.scrollTop + 10})  }})