×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：scroll-view可滚动视图区域

scroll-view 可滚动视图区域

解释：可滚动视图区域，可实现横向滚动和竖向滚动。使用竖向滚动时，需要给定该组件一个固定高度，可以通过 CSS 设置 height 。

属性说明

属性名 类型 默认值 必填 说明

scroll-x

Boolean

false

否

允许横向滚动

scroll-y

Boolean

false

否

允许纵向滚动

upper-threshold

Number/String

50

否

距顶部 / 左边多远时（单位 px），触发 scrolltoupper 事件

lower-threshold

Number/String

50

否

距底部 / 右边多远时（单位 px），触发 scrolltolower 事件

scroll-top

Number/String

否

设置竖向滚动条位置。要动态设置滚动条位置，用法scroll-top=”{= scrollTop =}”。
如果在设置组件渲染数据的同时设置了 scroll-top、scroll-left 值，需要在 swan.nextTick 回调中设置 scroll-top、scroll-left ，确保滚动条位置准确

scroll-left

Number/String

否

设置横向滚动条位置。要动态设置滚动条位置，用法scroll-left=”{= scrollLeft =}”。
如果在设置组件渲染数据的同时设置了 scroll-top、scroll-left 值，需要在 swan.nextTick 回调中设置 scroll-top、scroll-left ，确保滚动条位置准确

scroll-into-view

String

否

值应为某子元素 id（id 不能以数字开头）。设置滚动方向后，按方向滚动到该元素，动态设置用法scroll-into-view=”{= scrollIntoView =}”

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}

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：纵向滚动

 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  纵向滚动
    4.   
  
  
  4.  
    5.   
  
  
  5.  class="scroll-view"
    6.   
  
  
  6.  scroll-y
    7.   
  
  
  7.  upper-threshold="1"
    8.   
  
  
  8.  lower-threshold="1"
    9.   
  
  
  9.  scroll-top="{= scrollTop =}"
    10.   
  
  
  10.  scroll-into-view="{= scrollIntoView =}"
    11.   
  
  
  11.  scroll-with-animation="true"
    12.   
  
  
  12.  enable-back-to-top="true"
    13.   
  
  
  13.  bindscrolltoupper="upper"
    14.   
  
  
  14.  bindscrolltolower="lower"
    15.   
  
  
  15.  bindscroll="scroll">
    16.   
  
  
  16.  
    17.   
  
  
  17.  
    18.   
  
  
  18.  A
    19.   
  
  
  19.  B
    20.   
  
  
  20.  C
    21.   
  
  
  21.  
    22.   
  
  
  22.   
    23.   
  
  
  23.  
    24.   
  
  
  24.  下一页
    25.   
  
  
  25.  滚动
    26.   
  
  
  26.  回顶部
    27.   
  
  
  27.  
    28.   
  
  
  28.  
    29.   
  
  
    30.

代码示例 2：横向滚动

 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  横向滚动
    4.   
  
  
  4.  
    5.   
  
  
  5.  class="scroll-view"
    6.   
  
  
  6.  scroll-x
    7.   
  
  
  7.  bindscrolltoupper="toLeft"
    8.   
  
  
  8.  bindscrolltolower="toRight"
    9.   
  
  
  9.  scroll-left="{= scrollLeft =}"
    10.   
  
  
  10.  upper-threshold="1"
    11.   
  
  
  11.  lower-threshold="1"
    12.   
  
  
  12.  bindscroll="scroll">
    13.   
  
  
  13.  A
    14.   
  
  
  14.  B
    15.   
  
  
  15.  C
    16.   
  
  
  16.  
    17.   
  
  
  17.  
    18.   
  
  
    19.

Bug & Tip

  • Tip：请勿在 scroll-view 中使用 textarea、map、canvas、video 组件；详情请参考原生组件说明。
  • Tip：scroll-into-view 的优先级低于 scroll-top、scroll-left 。
  • Bug：在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh 。
  • Tip：若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view 。
  • Tip：scroll-into-view、scroll-top、scroll-left 需要在页面数据高度（或宽度）撑开时生效，若有异步加载数据，请在数据渲染完成时，重新动态赋值，才可生效。
  • Tip：在设置 scroll-view 组件 height 属性不是内容可视区总高度时，使用 swan.pageScrollTo API 无法生效。
  • Tip：暂不支持 border-radius 特性。

常见问题

Q：scroll-view 的 scroll-top 设置是否是无效的？

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

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  • SWAN
  • JS
 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  纵向滚动
    4.   
  
  
  4.  
    5.   
  
  
  5.  scroll-y
    6.   
  
  
  6.  style="height: 1.66rem;"
    7.   
  
  
  7.  scroll-into-view="{= toView =}"
    8.   
  
  
  8.  scroll-top="{= scrollTop =}"
    9.   
  
  
  9.  >
    10.   
  
  
  10.  A
    11.   
  
  
  11.  B
    12.   
  
  
  12.  C
    13.   
  
  
  13.   
    14.   
  
  
  14.  
    15.   
  
  
  15.  回顶部
    16.   
  
  
  16.  
    17.   
  
  
  17.  
    18.   
  
  
    19.

分享题目：创新互联百度小程序教程：scroll-view可滚动视图区域
标题来源：http://cdbrznjsb.com/article/djeghop.html

其他资讯

  • 网站建设专属方案

  • 网站定制化设计

  • 7X24小时服务

  • N对管家服务

让你的专属顾问为你服务