日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

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

新聞中心

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

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

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

    屬性說(shuō)明

    屬性名 類(lèi)型 默認(rèn)值 必填 說(shuō)明

    scroll-x

    Boolean

    false

    否

    允許橫向滾動(dòng)

    scroll-y

    Boolean

    false

    否

    允許縱向滾動(dòng)

    upper-threshold

    Number/String

    50

    否

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

    lower-threshold

    Number/String

    50

    否

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

    scroll-top

    Number/String

    否

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

    scroll-left

    Number/String

    否

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

    scroll-into-view

    String

    否

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

    scroll-with-animation

    Boolean

    false

    否

    在設(shè)置滾動(dòng)條位置時(shí)使用動(dòng)畫(huà)過(guò)渡

    enable-back-to-top

    Boolean

    false

    否

    iOS 點(diǎn)擊頂部導(dǎo)航欄、安卓雙擊標(biāo)題欄時(shí)，滾動(dòng)條返回頂部，只支持豎向

    bindscrolltoupper

    EventHandle

    否

    滾動(dòng)到頂部 / 左邊，會(huì)觸發(fā) scrolltoupper 事件

    bindscrolltolower

    EventHandle

    否

    滾動(dòng)到底部 / 右邊，會(huì)觸發(fā) scrolltolower 事件

    bindscroll

    EventHandle

    否

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

    示例

    跳轉(zhuǎn)編輯工具

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

    在 WEB IDE 中打開(kāi)

    掃碼體驗(yàn)

    代碼示例

    請(qǐng)使用百度APP掃碼

    代碼示例 1：縱向滾動(dòng)

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  縱向滾動(dòng)
      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.  下一頁(yè)
      25.   
  
  
    25.  滾動(dòng)
      26.   
  
  
    26.  回頂部
      27.   
  
  
    27.  
      28.   
  
  
    28.  
      29.   
  
  
      30.

    代碼示例 2：橫向滾動(dòng)

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  橫向滾動(dòng)
      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：請(qǐng)勿在 scroll-view 中使用 textarea、map、canvas、video 組件；詳情請(qǐng)參考原生組件說(shuō)明。
    • Tip：scroll-into-view 的優(yōu)先級(jí)低于 scroll-top、scroll-left 。
    • Bug：在滾動(dòng) scroll-view 時(shí)會(huì)阻止頁(yè)面回彈，所以在 scroll-view 中滾動(dòng)，是無(wú)法觸發(fā) onPullDownRefresh 。
    • Tip：若要使用下拉刷新，請(qǐng)使用頁(yè)面的滾動(dòng)，而不是 scroll-view 。
    • Tip：scroll-into-view、scroll-top、scroll-left 需要在頁(yè)面數(shù)據(jù)高度（或?qū)挾龋伍_(kāi)時(shí)生效，若有異步加載數(shù)據(jù)，請(qǐng)?jiān)跀?shù)據(jù)渲染完成時(shí)，重新動(dòng)態(tài)賦值，才可生效。
    • Tip：在設(shè)置 scroll-view 組件 height 屬性不是內(nèi)容可視區(qū)總高度時(shí)，使用 swan.pageScrollTo API 無(wú)法生效。
    • Tip：暫不支持 border-radius 特性。

    常見(jiàn)問(wèn)題

    Q：scroll-view 的 scroll-top 設(shè)置是否是無(wú)效的？

    A：使用豎向滾動(dòng)時(shí)，需要給 一個(gè)固定高度，通過(guò) CSS 設(shè)置 height 。

    代碼示例

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

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

    在 WEB IDE 中打開(kāi)

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  縱向滾動(dòng)
      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.

    名稱(chēng)欄目：創(chuàng)新互聯(lián)百度小程序教程：scroll-view可滾動(dòng)視圖區(qū)域
    文章轉(zhuǎn)載：http://www.5511xx.com/article/djeghop.html