快上网建站品牌

13518219792

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

  • scroll-view 可滚动视图区域
    • 属性说明
    • 示例
      • 代码示例 1：纵向滚动
      • 代码示例 2：横向滚动
    • Bug & Tip
    • 常见问题
      • Q：scroll-view 的 scroll-top 设置是否是无效的？

    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：纵向滚动

    • SWAN
    • JS
     
 
 
      
  
  
  
      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：横向滚动

    • SWAN
    • JS
     
 
 
      
  
  
  
      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://csdahua.cn/article/djeghop.html
    扫二维码与项目经理沟通

    我们在微信上24小时期待你的声音

    解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

    其他资讯

    行业动态

    企业网站建设的重要性！

    现在虽然是移动互联网时代，但企业网站依然重要，包含PC站点，移动站。可以说企业网站关系企业的未来发展和前途，尤其对中小企业更是如此，一些中小企业老板，对自己的名片很在乎，因为这是个门面。...

    服务项目

    联系吧 在百度地图上找到我们

    电话：13518219792

    如遇占线或暂未接听请拨：136xxx98888

    业务咨询 技术咨询 售后服务
    网站制作
    成都网站制作
    手机网站制作
    手机网站制作
    温江网站制作
    网站建设
    网站建设
    绵阳梓潼网站建设
    手机网站建设
    温江网站建设
    网站设计
    成都网站设计
    成都网站设计
    网站设计
    网站设计
    联系我们
    电话：13518219792
    邮箱：631063699@qq.com
    地址：成都青羊区锦天国际1002号
    网址：www.csdahua.cn

    微信二维码

    Copyright © 2002-2023 www.csdahua.cn 快上网建站品牌 QQ：244261566 版权所有 备案号：蜀ICP备19037934号