欢迎光临
我们一直在努力

九八云小程序教程:微信小程序视图容器 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}

使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height。

示例代码:

<view class="section">
<view class="section__title">vertical scroll</view>
<scroll-view scroll-y style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view>

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,这样也能通过点击顶部状态栏回到页面顶部

赞(0) 打赏
未经允许不得转载:九八云安全 » 九八云小程序教程:微信小程序视图容器 scroll-view

评论 抢沙发