日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)百度小程序教程：scroll-view可滾動視圖區(qū)域
  • scroll-view 可滾動視圖區(qū)域
    • 屬性說明
    • 示例
      • 代碼示例 1：縱向滾動
      • 代碼示例 2：橫向滾動
    • Bug & Tip
    • 常見問題
      • Q：scroll-view 的 scroll-top 設置是否是無效的？

    scroll-view 可滾動視圖區(qū)域

    解釋：可滾動視圖區(qū)域，可實現(xiàn)橫向滾動和豎向滾動。使用豎向滾動時，需要給定該組件一個固定高度，可以通過 CSS 設置 height 。

    屬性說明

    屬性名 類型 默認值 必填 說明

    scroll-x

    Boolean

    false

    否

    允許橫向滾動

    scroll-y

    Boolean

    false

    否

    允許縱向滾動

    upper-threshold

    Number/String

    50

    否

    距頂部 / 左邊多遠時（單位 px），觸發(fā) scrolltoupper 事件

    lower-threshold

    Number/String

    50

    否

    距底部 / 右邊多遠時（單位 px），觸發(fā) scrolltolower 事件

    scroll-top

    Number/String

    否

    設置豎向滾動條位置。要動態(tài)設置滾動條位置，用法scroll-top=”{= scrollTop =}”。
    如果在設置組件渲染數(shù)據(jù)的同時設置了 scroll-top、scroll-left 值，需要在 swan.nextTick 回調(diào)中設置 scroll-top、scroll-left ，確保滾動條位置準確

    scroll-left

    Number/String

    否

    設置橫向滾動條位置。要動態(tài)設置滾動條位置，用法scroll-left=”{= scrollLeft =}”。
    如果在設置組件渲染數(shù)據(jù)的同時設置了 scroll-top、scroll-left 值，需要在 swan.nextTick 回調(diào)中設置 scroll-top、scroll-left ，確保滾動條位置準確

    scroll-into-view

    String

    否

    值應為某子元素 id（id 不能以數(shù)字開頭）。設置滾動方向后，按方向滾動到該元素，動態(tài)設置用法scroll-into-view=”{= scrollIntoView =}”

    scroll-with-animation

    Boolean

    false

    否

    在設置滾動條位置時使用動畫過渡

    enable-back-to-top

    Boolean

    false

    否

    iOS 點擊頂部導航欄、安卓雙擊標題欄時，滾動條返回頂部，只支持豎向

    bindscrolltoupper

    EventHandle

    否

    滾動到頂部 / 左邊，會觸發(fā) scrolltoupper 事件

    bindscrolltolower

    EventHandle

    否

    滾動到底部 / 右邊，會觸發(fā) scrolltolower 事件

    bindscroll

    EventHandle

    否

    滾動時觸發(fā)，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

    示例

    跳轉編輯工具

    在開發(fā)者工具中打開

    在 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 的優(yōu)先級低于 scroll-top、scroll-left 。
    • Bug：在滾動 scroll-view 時會阻止頁面回彈，所以在 scroll-view 中滾動，是無法觸發(fā) onPullDownRefresh 。
    • Tip：若要使用下拉刷新，請使用頁面的滾動，而不是 scroll-view 。
    • Tip：scroll-into-view、scroll-top、scroll-left 需要在頁面數(shù)據(jù)高度（或?qū)挾龋伍_時生效，若有異步加載數(shù)據(jù)，請在數(shù)據(jù)渲染完成時，重新動態(tài)賦值，才可生效。
    • Tip：在設置 scroll-view 組件 height 屬性不是內(nèi)容可視區(qū)總高度時，使用 swan.pageScrollTo API 無法生效。
    • Tip：暫不支持 border-radius 特性。

    常見問題

    Q：scroll-view 的 scroll-top 設置是否是無效的？

    A：使用豎向滾動時，需要給 一個固定高度，通過 CSS 設置 height 。

    代碼示例

    在開發(fā)者工具中打開

    在開發(fā)者工具中打開

    在 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.

    分享標題：創(chuàng)新互聯(lián)百度小程序教程：scroll-view可滾動視圖區(qū)域
    文章出自：http://www.dlmjj.cn/article/djeghop.html