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

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)百度小程序教程：movable-view可移動(dòng)視圖容器
  • movable-view 可移動(dòng)視圖容器
    • 屬性說(shuō)明
      • direction 有效值
    • 示例
      • 代碼示例 1：movable-view 區(qū)域小于 movable-area
      • 代碼示例 2：movable-view 區(qū)域大于 movable-area
      • 代碼示例 3：只可以橫向移動(dòng)
      • 代碼示例 4：只可以縱向移動(dòng)
      • 代碼示例 5：可超出邊界
      • 代碼示例 6：帶有慣性
      • 代碼示例 7：可放縮
      • 代碼示例 8：可懸浮菜單
    • Bug & Tip

    movable-view 可移動(dòng)視圖容器

    解釋：可移動(dòng)的視圖容器，在頁(yè)面中可以拖拽滑動(dòng)。movable-view 必須在 movable-area 組件中，并且必須是直接子節(jié)點(diǎn)，否則不能移動(dòng)。

    堅(jiān)守“ 做人真誠(chéng) · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專(zhuān)業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都成都門(mén)簾小微創(chuàng)業(yè)公司專(zhuān)業(yè)提供成都企業(yè)網(wǎng)站建設(shè)營(yíng)銷(xiāo)網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺(jué)設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁(yè)布局、功能開(kāi)發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。

    屬性說(shuō)明

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

    direction

    String

    none

    否

    movable-view 的移動(dòng)方向，屬性值有 all、vertical、horizontal、none

    inertia

    Boolean

    false

    否

    movable-view 是否帶有慣性

    out-of-bounds

    Boolean

    false

    否

    超過(guò)可移動(dòng)區(qū)域后，movable-view 是否還可以移動(dòng)

    x

    Number

    否

    定義 x 軸方向的偏移，如果 x 的值不在可移動(dòng)范圍內(nèi)，會(huì)自動(dòng)移動(dòng)到可移動(dòng)范圍；改變 x 的值會(huì)觸發(fā)動(dòng)畫(huà)

    y

    Number

    否

    定義 y 軸方向的偏移，如果 y 的值不在可移動(dòng)范圍內(nèi)，會(huì)自動(dòng)移動(dòng)到可移動(dòng)范圍；改變 y 的值會(huì)觸發(fā)動(dòng)畫(huà)

    damping

    Number

    20

    否

    阻尼系數(shù)，用于控制 x 或 y 改變時(shí)的動(dòng)畫(huà)和過(guò)界回彈的動(dòng)畫(huà)，值越大移動(dòng)越快

    friction

    Number

    2

    否

    摩擦系數(shù)，用于控制慣性滑動(dòng)的動(dòng)畫(huà)，值越大摩擦力越大，滑動(dòng)越快停止；必須大于 0，否則會(huì)被設(shè)置成默認(rèn)值

    disabled

    Boolean

    false

    否

    是否禁用

    scale

    Boolean

    false

    否

    是否支持雙指縮放，默認(rèn)縮放手勢(shì)生效區(qū)域是在 movable-view 內(nèi)

    scale-min

    Number

    0.5

    否

    定義縮放倍數(shù)最小值

    scale-max

    Number

    10

    否

    定義縮放倍數(shù)最大值

    scale-value

    Number

    1

    否

    定義縮放倍數(shù)，取值范圍為 0.5-10

    animation

    Boolean

    true

    否

    是否使用動(dòng)畫(huà)

    bindchange

    EventHandle

    否

    拖動(dòng)過(guò)程中觸發(fā)的事件，event.detail = {x: x, y: y, source: source}，其中 source 表示產(chǎn)生移動(dòng)的原因，值可為 touch（拖動(dòng)）

    bindscale

    EventHandle

    否

    縮放過(guò)程中觸發(fā)的事件，event.detail = {x: x, y: y, scale: scale}

    htouchmove

    EventHandle

    否

    手指初次觸摸后發(fā)生橫向移動(dòng)，如果 catch 此事件，則意味著 touchmove 事件也被 catch

    vtouchmove

    EventHandle

    否

    手指初次觸摸后發(fā)生縱向移動(dòng)，如果 catch 此事件，則意味著 touchmove 事件也被 catch

    direction 有效值

    值 說(shuō)明
    all 水平方向和垂直方向
    vertical 垂直方向
    horizontal 水平方向
    none 不可移動(dòng)

    示例

    跳轉(zhuǎn)編輯工具

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

    在 WEB IDE 中打開(kāi)

    掃碼體驗(yàn)

    代碼示例

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

    代碼示例 1：movable-view 區(qū)域小于 movable-area

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  movable-view區(qū)域小于movable-area
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.  text
      8.   
  
  
    8.   
      9.   
  
  
    9.  
      10.   
  
  
    10.  
      11.   
  
  
      12.

    代碼示例 2：movable-view 區(qū)域大于 movable-area

    • SWAN
    • JS
    • CSS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  movable-view區(qū)域大于movable-area
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  text
      9.   
  
  
    9.  
      10.   
  
  
    10.  
      11.   
  
  
      12.

    代碼示例 3：只可以橫向移動(dòng)

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  只可以橫向移動(dòng)
      4.   
  
  
    4.  
      5.   
  
  
    5.  
      6.   
  
  
    6.  text
      7.   
  
  
    7.  
      8.   
  
  
      9.

    代碼示例 4：只可以縱向移動(dòng)

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  只可以縱向移動(dòng)
      4.   
  
  
    4.  
      5.   
  
  
    5.  
      6.   
  
  
    6.  text
      7.   
  
  
    7.  
      8.   
  
  
      9.

    代碼示例 5：可超出邊界

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  可超出邊界
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.  text
      8.   
  
  
    8.  
      9.   
  
  
    9.  
      10.   
  
  
      11.

    代碼示例 6：帶有慣性

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  帶有慣性
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.  text
      8.   
  
  
    8.  
      9.   
  
  
    9.  
      10.   
  
  
      11.

    代碼示例 7：可放縮

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  可放縮
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  x="{=x=}" 
      9.   
  
  
    9.  y="{=y=}" 
      10.   
  
  
    10.  scale
      11.   
  
  
    11.  scale-min="0.5"
      12.   
  
  
    12.  scale-max="4"
      13.   
  
  
    13.  scale-value="{{scale}}"
      14.   
  
  
    14.  direction="all" 
      15.   
  
  
    15.  animation="false" 
      16.   
  
  
    16.  bindchange="onChange" 
      17.   
  
  
    17.  bindscale="onScale">
      18.   
  
  
    18.  text
      19.   
  
  
    19.  
      20.   
  
  
    20.  
      21.   
  
  
    21.  
      22.   
  
  
    22.  
      23.   
  
  
      24.

    代碼示例 8：可懸浮菜單

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  x="0"
      5.   
  
  
    5.  y="0"
      6.   
  
  
    6.  direction="all"
      7.   
  
  
    7.  animation="false"
      8.   
  
  
    8.  scale
      9.   
  
  
    9.  scale-min="0.5"
      10.   
  
  
    10.  scale-max="4">
      11.   
  
  
    11.  
      12.   
  
  
    12.  
      13.   
  
  
      14.

    Bug & Tip

    • Tip：movable-view 需要在 CSS 中設(shè)置 width 和 height 屬性；若不設(shè)置，默認(rèn)為 10px 。
    • Tip：movable-view 默認(rèn)為絕對(duì)定位，top 和 left 屬性為 0px 。
    • Tip：當(dāng) movable-view 的范圍小于 movable-area 時(shí)，movable-view 的移動(dòng)范圍是在 movable-area 內(nèi)。
    • Tip：當(dāng) movable-view 的范圍大于 movable-area 時(shí)，movable-view 的移動(dòng)范圍必須在 movable-area 內(nèi)（x 軸方向和 y 軸方向分開(kāi)考慮）。
    • Tip：movable-view 必須在組件中，并且必須是直接子節(jié)點(diǎn)，否則不能移動(dòng)。

    網(wǎng)頁(yè)名稱(chēng)：創(chuàng)新互聯(lián)百度小程序教程：movable-view可移動(dòng)視圖容器
    文章出自：http://www.dlmjj.cn/article/cddhdjg.html