C语言学习网

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

发表于:2022-12-09 作者:安全数据网编辑
编辑最后更新 2022年12月09日,这篇文章主要为大家展示了"微信小程序中scroll-view怎么用",内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下"微信小程序中scroll-view怎么用"

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

scroll-view


可滚动视图区域。

属性名类型默认值说明
scroll-xBooleanfalse允许横向滚动
scroll-yBooleanfalse允许纵向滚动
upper-thresholdNumber50距顶部/左边多远时(单位px),触发 scrolltoupper 事件
lower-thresholdNumber50距底部/右边多远时(单位px),触发 scrolltolower 事件
scroll-topNumber设置竖向滚动条位置
scroll-leftNumber设置横向滚动条位置
scroll-into-viewString值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
scroll-with-animationBooleanfalse在设置滚动条位置时使用动画过渡
enable-back-to-topBooleanfalseiOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向
bindscrolltoupperEventHandle滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolowerEventHandle滚动到底部/右边,会触发 scrolltolower 事件
bindscrollEventHandle滚动时触发,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})  }})
Bug & Tip
  1. tip: 请勿在scroll-view中使用textareamapcanvasvideo组件

  2. tip: scroll-into-view的优先级高于scroll-top

  3. tip: 在滚动scroll-view时会阻止页面回弹,所以在scroll-view中滚动,是无法触发onPullDownRefresh

  4. tip: 若要使用下拉刷新,请使用页面的滚动,而不是scroll-view,这样也能通过点击顶部状态栏回到页面顶部


以上是"微信小程序中scroll-view怎么用"这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

0