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

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

新聞中心

這里有您想知道的互聯網營銷解決方案
創(chuàng)新互聯百度小程序教程：button按鈕
  • button 按鈕
    • 屬性說明
      • size 有效值
      • type 有效值
      • form-type 有效值
      • open-type 有效值
    • 示例
      • 代碼示例 1：主要按鈕
      • 代碼示例 2：次要按鈕
      • 代碼示例 3：警示按鈕
      • 代碼示例 4：小尺寸按鈕
      • 代碼示例 5：自定義點擊態(tài)
      • 代碼示例 6：綁定開放能力
      • 代碼示例 7：form-type=”submit/reset”
      • 代碼示例 8：hover-stop-propagation 屬性
      • 代碼示例 9：自定義 button 樣式
      • 代碼示例 10：同時綁定開放能力、普通點擊事件
    • Bug & Tip
    • 常見問題
      • Q：button 組件的類型為默認時，無法修改按鈕的邊框樣式?

    button 按鈕

    開發(fā)者工具 button 組件 open-type 不支持設置 contact ，請到真機上調試。

    專注于為中小企業(yè)提供成都網站制作、網站建設、外貿網站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)江達免費做網站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯網行業(yè)人才，有力地推動了成百上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網站建設實現規(guī)模擴充和轉變。

    解釋：按鈕，設計文檔參考按鈕 。
    Web 態(tài)說明：由于瀏覽器的限制，在 Web 態(tài)內不支持獲取聯系人、打開授權設置頁等功能。具體支持情況詳見屬性說明。

    屬性說明

    屬性名 類型 默認值 必填 說明 最低支持版本 Web 態(tài)說明

    size

    String

    default

    否

    大小

    		 - -

    type

    String

    default

    否

    類型

    		 - -

    plain

    Boolean

    false

    否

    按鈕是否鏤空，背景色透明

    		 - -

    form-type

    String

    buttonclick

    否

    用于

    組件，點擊分別會觸發(fā)組件的 submit/reset 事件

    		 - -

    open-type

    String

    否

    百度 App 開放能力，比如分享、獲取用戶信息等等

    		 - -

    hover-class

    String

    button-hover

    否

    點擊態(tài)。指定按鈕按下去的樣式類。當hover-class=”none”時，沒有點擊態(tài)效果。button-hover 默認為{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}

    		 - -

    hover-stop-propagation

    Boolean

    false

    否

    指定是否阻止本節(jié)點的祖先節(jié)點出現點擊態(tài)

    		 - -

    hover-start-time

    Number

    20

    否

    按住后多久出現點擊態(tài)（單位：毫秒）

    		 - -

    hover-stay-time

    Number

    70

    否

    手指松開后點擊態(tài)保留時間（單位：毫秒）

    		 - -

    disabled

    Boolean

    false

    否

    是否禁用

    		 - -

    loading

    Boolean

    false

    否

    名稱前是否帶有 loading 圖標

    		 - -

    bindgetphonenumber

    EventHandle

    否

    獲取用戶手機號回調。和 open-type 搭配使用， 使用時機：open-type=”getPhoneNumber”。具體申請方法請見：獲取用戶手機號權限申請

    1.12.14
    低版本請做兼容性處理

    暫不支持

    bindgetuserinfo

    EventHandle

    否

    用戶點擊該按鈕時，會返回獲取到的用戶信息，從返回參數的 detail 中獲取到的值，和 swan.getUserInfo 一樣的。和 open-type 搭配使用， 使用時機：open-type=”getUserInfo”

    		 -

    暫不支持

    bindopensetting

    EventHandle

    否

    在打開授權設置頁后回調，使用時機：open-type=”openSetting”

    		 -

    暫不支持

    bindcontact

    EventHandle

    否

    客服消息回調，使用時機：open-type=”contact”。如果需要使用該功能，請發(fā)送郵件至 smartprogram_support@baidu.com 咨詢詳細情況

    		 -

    暫不支持

    bindchooseaddress

    EventHandle

    否

    用戶點擊該按鈕時，調起用戶編輯收貨地址原生界面，并在編輯完成后返回用戶選擇的地址，從返回參數的 detail 中獲取，和 swan.chooseAddress 一樣的。和 open-type 搭配使用，使用時機：open-type=”chooseAddress”

    3.160.3
    低版本請做兼容性處理

    暫不支持

    bindchooseinvoicetitle

    EventHandle

    否

    用戶點擊該按鈕時，選擇用戶的發(fā)票抬頭，和 swan.chooseInvoiceTitle 一樣的。和 open-type 搭配使用，使用時機：open-type=”chooseInvoiceTitle”

    3.160.3
    低版本請做兼容性處理

    暫不支持

    bindlogin

    EventHandle

    否

    登錄回調，和 open-type 搭配使用，使用時機：open-type=”login”?？梢酝ㄟ^返回參數的 detail 判斷是否登錄成功，當 errMsg 為‘login:ok’時即為成功。如想獲取登錄憑證請示用 swan.getLoginCode

    3.230.1
    低版本請做兼容性處理

    		 -

    contact

    EventHandle

    否

    打開客服會話，如果用戶在會話中點擊消息卡片后返回小程序，可以從 bindcontact 回調中獲得具體信息

    		 -

    暫不支持

    template-id

    String/Array.

    否（open-type 為 subscribe 時必填）

    發(fā)送訂閱類模板消息所用的模板庫標題 ID ，可通過 getTemplateLibraryList 獲取
    當參數類型為 Array 時，可傳遞 1~3 個模板庫標題 ID

    3.270.1
    低版本請做兼容性處理

    暫不支持

    subscribe-id

    String

    否（open-type 為 subscribe 時必填）

    發(fā)送訂閱類模板消息時所使用的唯一標識符，內容由開發(fā)者自定義，用來標識訂閱場景
    注意：同一用戶在同一 subscribe-id 下的多次授權不累積下發(fā)權限，只能下發(fā)一條。若要訂閱多條，需要不同 subscribe-id

    3.270.1
    低版本請做兼容性處理

    暫不支持

    bindsubmit

    EventHandle

    否

    訂閱消息授權回調，和 open-type 搭配使用，使用時機：open-type=”subscribe”

    3.270.1
    低版本請做兼容性處理

    暫不支持

    size 有效值

    值 說明
    default 默認大小
    mini 小尺寸

    type 有效值

    值 說明
    primary 藍色
    default 白色
    warn 紅色

    form-type 有效值

    值 說明
    buttonclick 普通按鈕點擊
    submit 提交表單
    reset 重置表單

    open-type 有效值

    值 說明 Web 態(tài)說明
    share 觸發(fā)用戶分享，使用前建議先閱讀 swan.onShareAppMessage -
    getUserInfo 獲取用戶信息，可以從 bindgetuserinfo 回調中獲取到用戶信息，參考用戶數據的簽名驗證和加解密對用戶數據進行處理 出于安全性考慮，暫不支持
    getPhoneNumber 獲取用戶手機號，可以從 bindgetphonenumber 回調中獲取到用戶信息：
    detail.errMsg 值為“getPhoneNumber:ok” 時代表用戶信息獲取成功；
    detail.errMsg 值為“getPhoneNumber:fail auth deny”時代表用戶信息獲取失敗。
    參考用戶數據的簽名驗證和加解密對用戶數據進行處理獲得用戶手機號。
    用戶手機號信息解密后數據示例：{“mobile”:”15000000000”}
    1. 非個人開發(fā)者可申請；
    2. 審核通過后，進入小程序首頁,在左側導航欄單擊“設置 -> 開發(fā)設置”。下拉頁面，在“獲取用戶手機號權限申請”中單擊“申請開通”    		 出于安全性考慮，暫不支持
    openSetting 打開授權設置頁 暫不支持
    chooseAddress 選擇用戶收貨地址，可以從 bindchooseaddress 回調中獲取到用戶選擇的地址信息 出于安全性考慮，暫不支持
    chooseInvoiceTitle 選擇用戶發(fā)票抬頭，可以從 bindchooseinvoicetitle 回調中獲取到用戶選擇發(fā)票抬頭信息 出于安全性考慮，暫不支持
    contact 打開客服會話，如果用戶在會話中點擊消息卡片后返回小程序，可以從 bindcontact 回調中獲得具體信息 暫不支持
    login 登錄，可以從 bindlogin 回調中確認是否登錄成功 -
    subscribe 訂閱類模板消息，需要用戶授權才可發(fā)送，訂閱消息詳細說明請參考訂閱消息接入 暫不支持

    示例

    跳轉編輯工具

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

    在 WEB IDE 中打開

    掃碼體驗

    代碼示例

    請使用百度APP掃碼

    代碼示例 1：主要按鈕

    • SWAN
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  主要按鈕
      5. 
  
  
  
    5.  primary
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.  
      8. 
  
  
  
    8.  主按鈕 normal
      9. 
  
  
  
    9.  
      10. 
  
  
  
    10.  
      11. 
  
  
  
    11.  主按鈕 loading
      12. 
  
  
  
    12.  
      13. 
  
  
  
    13.  
      14. 
  
  
  
    14.  主按鈕 disabled
      15. 
  
  
  
    15.  
      16. 
  
  
  
    16.  
      17. 
  
  
  
      18.

    代碼示例 2：次要按鈕

    • SWAN
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  次要按鈕
      5. 
  
  
  
    5.  default
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.  
      8. 
  
  
  
    8.  次按鈕 normal
      9. 
  
  
  
    9.  
      10. 
  
  
  
    10.  
      11. 
  
  
  
    11.  次按鈕 loading
      12. 
  
  
  
    12.  
      13. 
  
  
  
    13.  
      14. 
  
  
  
    14.  次按鈕 disabled
      15. 
  
  
  
    15.  
      16. 
  
  
  
    16.  
      17. 
  
  
  
      18.

    代碼示例 3：警示按鈕

    • SWAN
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  警示按鈕
      5. 
  
  
  
    5.  warn
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.  
      8. 
  
  
  
    8.  警示按鈕 normal
      9. 
  
  
  
    9.  
      10. 
  
  
  
    10.  
      11. 
  
  
  
    11.  警示按鈕 loading
      12. 
  
  
  
    12.  
      13. 
  
  
  
    13.  
      14. 
  
  
  
    14.  警示按鈕 disabled
      15. 
  
  
  
    15.  
      16. 
  
  
  
    16.  
      17. 
  
  
  
      18.

    代碼示例 4：小尺寸按鈕

    • SWAN
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  小尺寸按鈕
      5. 
  
  
  
    5.  size='mini'
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.  
      8. 
  
  
  
    8.  按鈕 
      9. 
  
  
  
    9.  
      10. 
  
  
  
    10.  
      11. 
  
  
  
    11.  按鈕 
      12. 
  
  
  
    12.  
      13. 
  
  
  
    13.  
      14. 
  
  
  
    14.  按鈕 
      15. 
  
  
  
    15.  
      16. 
  
  
  
    16.  
      17. 
  
  
  
      18.

    代碼示例 5：自定義點擊態(tài)

    • SWAN
    • JS
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  自定義點擊態(tài)
      5. 
  
  
  
    5.  
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.  無點擊態(tài)
      8. 
  
  
  
    8.  
      9. 
  
  
  
    9.  
      10. 
  
  
  
    10.  點擊態(tài)延遲出現
      11. 
  
  
  
    11.  
      12. 
  
  
  
    12.  
      13. 
  
  
  
    13.  點擊態(tài)延遲消失
      14. 
  
  
  
    14.  
      15. 
  
  
  
    15.  
      16. 
  
  
  
      17.

    代碼示例 6：綁定開放能力

    • SWAN
    • JS
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  綁定開放能力
      5. 
  
  
  
    5.  
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.  
      8. 
  
  
  
    8.  
      9. 
  
  
  
    9.  
      10. 
  
  
  
    10.  
      11. 
  
  
  
    11.  
      12. 
  
  
  
    12.  
      13. 
  
  
  
    13.  
      14. 
  
  
  
    14.  
      15. 
  
  
  
    15.  
      16. 
  
  
  
      17.

    代碼示例 7：form-type=”submit/reset”

    • SWAN
    • JS
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  綁定表單操作
      5. 
  
  
  
    5.  form-type="submit/reset"
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.  
      8. 
  
  
  
    8.  
      9. 
  
  
  
    9.  提交
      10. 
  
  
  
    10.  
      11. 
  
  
  
    11.  
      12. 
  
  
  
    12.  重置
      13. 
  
  
  
    13.  
      14. 
  
  
  
    14.  
      15. 
  
  
  
    15.  
      16. 
  
  
  
      17.

    代碼示例 8：hover-stop-propagation 屬性

    • SWAN
    • JS
    • CSS
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  按鈕父級同步出現點擊態(tài)
      5. 
  
  
  
    5.  hover-stop-propagation
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.  
      8. 
  
  
  
    8.  點擊卡片空白區(qū)域體驗效果
      9. 
  
  
  
    9.  
      10. 
  
  
  
    10.  
      11. 
  
  
  
      12.

    代碼示例 9：自定義 button 樣式

    • SWAN
    • JS
    • CSS
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  自定義 button 樣式
      5. 
  
  
  
    5.  
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.  {{isFavor ? '已' : '' }}關注
      8. 
  
  
  
    8.  
      9. 
  
  
  
    9.  
      10. 
  
  
  
      11.

    代碼示例 10：同時綁定開放能力、普通點擊事件

    • SWAN
    • JS
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  同時綁定開放能力、普通點擊事件
      5. 
  
  
  
    5.  
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.  
      8. 
  
  
  
      9.

    Bug & Tip

    • Tip：建議頁面中使用 1 個主要按鈕引導操作。
    • Tip：按鈕文案可配，文案不可折行顯示，文案前可增加 icon 及局部加載狀態(tài)。
    • Tip：頁面中可以使用多個小尺寸按鈕引導操作。
    • Tip：建議小尺寸按鈕寬度在 364px 到 114px 之間。

    常見問題

    Q：button 組件的類型為默認時，無法修改按鈕的邊框樣式?

    A：為了處理移動端的 1px 問題，默認類型的 button 組件在設置邊框樣式時使用了偽類；開發(fā)者可以通過偽類設置樣式來覆蓋默認的邊框樣式。

    代碼示例

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

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

    在 WEB IDE 中打開

    • SWAN
    • CSS
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  按鈕 default
      3. 
  
  
  
      4.

    新聞名稱：創(chuàng)新互聯百度小程序教程：button按鈕
    文章分享：http://m.5511xx.com/article/dphsscs.html