• <ins id="jrqux"><video id="jrqux"></video></ins>
  • <ins id="jrqux"><option id="jrqux"></option></ins>
    1. <ins id="jrqux"><option id="jrqux"></option></ins>

      <tr id="jrqux"></tr>

      微信小程序組件說明表

      基礎組件

      框架為開發者提供了一系列基礎組件,開發者可以通過組合這些基礎組件進行快速開發。

      什么是組件:

      <tagname property="value">
        Content goes here ...
      </tagename>
      

      屬性類型

      類型 描述 注解
      Boolean 布爾值 組件寫上該屬性,不管該屬性等于什么,其值都為true,只有組件上沒有寫該屬性時,屬性值才為false。如果屬性值為變量,變量的值會被轉換為Boolean類型
      Number 數字 1, 2.5
      String 字符串 “string”
      Array 數組 [ 1, “string” ]
      Object 對象 { key: value }
      EventHandler 事件處理函數名 “handlerName” 是 Page中定義的事件處理函數名
      Any 任意屬性
      共同屬性類型
      屬性 類型 描述 注解
      id String 組件的唯一標示 保持整個頁面唯一
      class String 組件的樣式類 在對應的 WXSS 中定義的樣式類
      style String 組件的內聯樣式 可以動態設置的內聯樣式
      hidden String 組件是否顯示 所有組件默認顯示
      data-* Any 自定義屬性 組件上觸發的事件時,會發送給事件處理函數
      bind* / catch* EventHandler 組件的事件

      基本組件列表

      基礎組件分為以下幾類:

      視圖容器(View Container) 基礎內容(Basic Content) 表單(Form) 導航(Navigation) 多媒體(Media) 地圖(Map) 畫布(Canvas)

      視圖容器(View Container):

      組件名 注釋 組件屬性
      屬性名 類型 默認值 說明 最低版本
      view 視圖容器 hover-class String none 指定按下去的樣式類。當 hover-class="none" 時,沒有點擊態效果  
      hover-stop-propagation Boolean false 指定是否阻止本節點的祖先節點出現點擊態 1.5.0
      hover-start-time Number 50 按住后多久出現點擊態,單位毫秒  
      hover-stay-time Number 400 手指松開后點擊態保留時間,單位毫秒  
      scroll-view 可滾動視圖容器 scroll-x Boolean false 允許橫向滾動  
      scroll-y Boolean false 允許縱向滾動  
      upper-threshold Number 50 距頂部/左邊多遠時(單位px),觸發 scrolltoupper 事件  
      lower-threshold Number 50 距底部/右邊多遠時(單位px),觸發 scrolltolower 事件  
      scroll-top Number   設置豎向滾動條位置  
      scroll-left Number   設置橫向滾動條位置  
      scroll-into-view String   值應為某子元素id(id不能以數字開頭)。設置哪個方向可滾動,則在哪個方向滾動到該元素  
      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}  
      swiper 滑塊視圖容器 indicator-dots Boolean false 是否顯示面板指示點  
      indicator-color Color rgba(0, 0, 0, .3) 指示點顏色 1.1.0
      indicator-active-color Color #000000 當前選中的指示點顏色 1.1.0
      autoplay Boolean false 是否自動切換  
      current Number 0 當前所在頁面的 index  
      interval Number 5000 自動切換時間間隔  
      duration Number 500 滑動動畫時長  
      circular Boolean false 是否采用銜接滑動  
      vertical Boolean false 滑動方向是否為縱向  
      bindchange EventHandle   current 改變時會觸發 change 事件,event.detail = {current: current, source: source}  

      基礎內容(Basic Content):

      組件名 注釋 組件屬性
      屬性名 類型 默認值 說明 最低版本
      icon 圖標 type String   icon的類型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear  
      size Number 23 icon的大小,單位px  
      color Color   icon的顏色,同css的color  
      text 文字 selectable Boolean false 文本是否可選 1.1.0
      space String false 顯示連續空格
      有效值 ensp:中文字符空格一半大小 emsp:中文字符空格大小 nbsp:根據字體設置的空格大小
      1.4.0
      decode Boolean false 是否解碼 1.4.0
      progress 進度條 percent Float 百分比0~100  
      show-info Boolean false 在進度條右側顯示百分比  
      stroke-width Number 6 進度條線的寬度,單位px  
      color Color #09BB07 進度條顏色 (請使用 activeColor)  
      activeColor Color   已選擇的進度條的顏色  
      backgroundColor Color   未選擇的進度條的顏色  
      active Boolean false 進度條從左往右的動畫  
      active-mode String backwards backwards: 動畫從頭播;forwards:動畫從上次結束點接著播 1.7.0

      表單(Form):

      組件名 注釋 組件屬性
      屬性名 類型 默認值 說明 生效時機 最低版本
      button 按鈕 size String default 按鈕的大小    
      type String default 按鈕的樣式類型    
      plain Boolean false 按鈕是否鏤空,背景色透明    
      disabled Boolean false 是否禁用    
      loading Boolean false 名稱前是否帶 loading 圖標    
      form-type String   用于 <form/> 組件,點擊分別會觸發 <form/> 組件的 submit/reset 事件    
      open-type String   微信開放能力   1.1.0
      hover-class String button-hover 指定按鈕按下去的樣式類。當 hover-class="none" 時,沒有點擊態效果    
      hover-stop-propagation Boolean false 指定是否阻止本節點的祖先節點出現點擊態   1.5.0
      hover-start-time Number 20 按住后多久出現點擊態,單位毫秒    
      hover-stay-time Number 70 手指松開后點擊態保留時間,單位毫秒    
      bindgetuserinfo Handler   用戶點擊該按鈕時,會返回獲取到的用戶信息,從返回參數的detail中獲取到的值同wx.getUserInfo open-type="getUserInfo' 1.3.0
      lang String en 指定返回用戶信息的語言,zh_CN 簡體中文,zh_TW 繁體中文,en 英文。 open-type="getUserInfo" 1.3.0
      session-from String   會話來源 open-type="contact" 1.4.0
      send-message-title String 當前標題 會話內消息卡片標題 open-type="contact" 1.5.0
      send-message-path String 當前分享路徑 會話內消息卡片點擊跳轉小程序路徑 open-type="contact" 1.5.0
      send-message-img String 截圖 會話內消息卡片圖片 open-type="contact" 1.5.0
      show-message-card Boolean false 顯示會話內消息卡片 open-type="contact" 1.5.0
      bindcontact Handler   客服消息回調 open-type="contact" 1.5.0
      bindgetphonenumber Handler   獲取用戶手機號回調 open-type="getphonenumber" 1.2.0
      form 表單 report-submit Boolean   是否返回 formId 用于發送模板消息  
      bindsubmit EventHandle   攜帶 form 中的數據觸發 submit 事件,event.detail = {value : {'name': 'value'} , formId: ''}  
      bindreset EventHandle   表單重置時會觸發 reset 事件  
      input 輸入框 value String   輸入框的初始內容  
      type String "text" input 的類型  
      password Boolean false 是否是密碼類型  
      placeholder String   輸入框為空時占位符  
      placeholder-style String   指定 placeholder 的樣式  
      placeholder-class String "input-placeholder" 指定 placeholder 的樣式類  
      disabled Boolean false 是否禁用  
      maxlength Number 140 最大輸入長度,設置為 -1 的時候不限制最大長度  
      cursor-spacing Number 0 指定光標與鍵盤的距離,單位 px 。取 input 距離底部的距離和 cursor-spacing 指定的距離的最小值作為光標與鍵盤的距離  
      auto-focus Boolean false (即將廢棄,請直接使用 focus )自動聚焦,拉起鍵盤  
      focus Boolean false 獲取焦點  
      confirm-type String "done" 設置鍵盤右下角按鈕的文字 1.1.0
      confirm-hold Boolean false 點擊鍵盤右下角按鈕時是否保持鍵盤不收起 1.1.0
      cursor Number   指定focus時的光標位置 1.5.0
      bindinput EventHandle   當鍵盤輸入時,觸發input事件,event.detail = {value, cursor},處理函數可以直接 return 一個字符串,將替換輸入框的內容。  
      bindfocus EventHandle   輸入框聚焦時觸發,event.detail = {value: value}  
      bindblur EventHandle   輸入框失去焦點時觸發,event.detail = {value: value}  
      bindconfirm EventHandle   點擊完成按鈕時觸發,event.detail = {value: value}  
      checkbox 多項選擇器 value String   <checkbox/>標識,選中時觸發<checkbox-group/>的 change 事件,并攜帶 <checkbox/> 的 value  
      disabled Boolean false 是否禁用  
      checked Boolean false 當前是否選中,可用來設置默認選中  
      color Color   checkbox的顏色,同css的color  
      radio 單項選擇器 value String   <radio/> 標識。當該<radio/> 選中時,<radio-group/> 的 change 事件會攜帶<radio/>的value  
      disabled Boolean false 是否禁用  
      checked Boolean false 當前是否選中,可用來設置默認選中  
      color Color   radio的顏色,同css的color  
      picker
      (mode = selector)
      (普通)列表選擇器 range Array / Object Array [] mode為 selector 或 multiSelector 時,range 有效  
      range-key String   當 range 是一個 Object Array 時,通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內容  
      value Number 0 value 的值表示選擇了 range 中的第幾個(下標從 0 開始)  
      bindchange EventHandle   value 改變時觸發 change 事件,event.detail = {value: value}  
      disabled Boolean false 是否禁用  
      picker
      (mode = multiSelector)
      (多列)列表選擇器 range 二維Array / 二維Object Array [] mode為 selector 或 multiSelector 時,range 有效。二維數組,長度表示多少列,數組的每項表示每列的數據,如[["a","b"], ["c","d"]]  
      range-key String   當 range 是一個 二維Object Array 時,通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內容  
      value Array 0 value 每一項的值表示選擇了 range 對應項中的第幾個(下標從 0 開始)  
      bindchange EventHandle   value 改變時觸發 change 事件,event.detail = {value: value}  
      bindcolumnchange EventHandle   某一列的值改變時觸發 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改變了第幾列(下標從0開始),value 的值表示變更值的下標  
      disabled Boolean false 是否禁用  
      picker
      (mode = time)
      (時間)列表選擇器 value String   表示選中的時間,格式為"hh:mm"  
      start String   表示有效時間范圍的開始,字符串格式為"hh:mm"  
      end String   表示有效時間范圍的結束,字符串格式為"hh:mm"  
      bindchange EventHandle   value 改變時觸發 change 事件,event.detail = {value: value}  
      disabled Boolean false 是否禁用  
      picker
      (mode = date)
      (日期)列表選擇器 value String 0 表示選中的日期,格式為"YYYY-MM-DD"  
      start String   表示有效日期范圍的開始,字符串格式為"YYYY-MM-DD"  
      end String   表示有效日期范圍的結束,字符串格式為"YYYY-MM-DD"  
      fields String day 有效值 year,month,day,表示選擇器的粒度  
      bindchange EventHandle   value 改變時觸發 change 事件,event.detail = {value: value}  
      disabled Boolean false 是否禁用  
      picker
      (mode = region)
      (日期)列表選擇器 value Array [] 表示選中的省市區,默認選中每一列的第一個值  
      custom-item String   可為每一列的頂部添加一個自定義的項 1.5.0
      bindchange EventHandle   value 改變時觸發 change 事件,event.detail = {value: value}  
      disabled Boolean false 是否禁用  
      picker-view 內嵌列表選擇器 value NumberArray   數組中的數字依次表示 picker-view 內的 picker-view-colume 選擇的第幾項(下標從 0 開始),數字大于 picker-view-column 可選項長度時,選擇最后一項。  
      indicator-style String   設置選擇器中間選中框的樣式  
      indicator-class String   設置選擇器中間選中框的類名 1.1.0
      mask-style String   設置蒙層的樣式 1.5.0
      mask-class String   設置蒙層的類名 1.5.0
      bindchange EventHandle   當滾動選擇,value 改變時觸發 change 事件,event.detail = {value: value};value為數組,表示 picker-view 內的 picker-view-column 當前選擇的是第幾項(下標從 0 開始)  
      slider 滾動選擇器 min Number 0 最小值  
      max Number 100 最大值  
      step Number 0 步長,取值必須大于 0,并且可被(max - min)整除  
      disabled Boolean false 是否禁用  
      value Number 0 當前取值  
      color Color #e9e9e9 背景條的顏色(請使用 backgroundColor)  
      selected-color Color #1aad19 已選擇的顏色(請使用 activeColor)  
      activeColor Color #1aad19 已選擇的顏色  
      backgroundColor Color #e9e9e9 背景條的顏色  
      show-value Boolean false 是否顯示當前 value  
      bindchange EventHandle   完成一次拖動后觸發的事件,event.detail = {value: value}  
      bindchanging EventHandle   拖動過程中觸發的事件,event.detail = {value: value} 1.7.0
      switch 開關選擇器 checked Boolean false 是否選中  
      type String switch 樣式,有效值:switch, checkbox  
      bindchange EventHandle   checked 改變時觸發 change 事件,event.detail={ value:checked}  
      color Color   switch 的顏色,同 css 的 color  
      label 標簽 for String   綁定控件的 id  

      導航(Navigation):

      組件名 注釋 組件屬性
      屬性名 類型 默認值 說明 最低版本
      navigator 應用鏈接 url String   應用內的跳轉鏈接  
      open-type String navigate 跳轉方式  
      delta Number   當 open-type 為 'navigateBack' 時有效,表示回退的層數  
      hover-class String navigator-hover 指定點擊時的樣式類,當hover-class="none"時,沒有點擊態效果  
      hover-stop-propagation Boolean false 指定是否阻止本節點的祖先節點出現點擊態 1.5.0
      hover-start-time Number 50 按住后多久出現點擊態,單位毫秒  
      hover-stay-time Number 600 手指松開后點擊態保留時間,單位毫秒  
      其中open-type 的有效值如下:
      說明 最低版本
      navigate 對應 wx.navigateTo 的功能  
      redirect 對應 wx.redirectTo 的功能  
      switchTab 對應 wx.switchTab 的功能  
      reLaunch 對應 wx.reLaunch 的功能 1.1.0
      navigateBack 對應 wx.navigateBack 的功能 1.1.0

      多媒體(Media):

      組件名 注釋 組件屬性
      屬性名 類型 默認值 說明 最低版本
      audio 音頻 id String   audio 組件的唯一標識符  
      src String   要播放音頻的資源地址  
      loop Boolean false 是否循環播放  
      controls Boolean false 是否顯示默認控件  
      poster String   默認控件上的音頻封面的圖片資源地址,如果 controls 屬性值為 false 則設置 poster 無效  
      name String 未知音頻 默認控件上的音頻名字,如果 controls 屬性值為 false 則設置 name 無效  
      author String 未知作者 默認控件上的作者名字,如果 controls 屬性值為 false 則設置 author 無效  
      binderror EventHandle   當發生錯誤時觸發 error 事件,detail = {errMsg: MediaError.code}  
      bindplay EventHandle   當開始/繼續播放時觸發play事件  
      bindpause EventHandle   當暫停播放時觸發 pause 事件  
      bindtimeupdate EventHandle   當播放進度改變時觸發 timeupdate 事件,detail = {currentTime, duration}  
      bindended EventHandle   當播放到末尾時觸發 ended 事件  
      image 圖片 src String   圖片資源地址  
      mode String 'scaleToFill' 圖片裁剪、縮放的模式  
      lazy-load Boolean false 圖片懶加載。只針對page與scroll-view下的image有效 1.5.0
      binderror HandleEvent   當錯誤發生時,發布到 AppService 的事件名,事件對象event.detail = {errMsg: 'something wrong'}  
      bindload HandleEvent   當圖片載入完畢時,發布到 AppService 的事件名,事件對象event.detail = {height:'圖片高度px', width:'圖片寬度px'}  
      video 視頻 src String   要播放視頻的資源地址  
      initial-time Number   指定視頻初始播放位置 1.6.0
      duration Number   指定視頻時長 1.1.0
      controls Boolean true 是否顯示默認播放控件(播放/暫停按鈕、播放進度、時間)  
      danmu-list Object Array   彈幕列表  
      danmu-btn Boolean false 是否顯示彈幕按鈕,只在初始化時有效,不能動態變更  
      enable-danmu Boolean false 是否展示彈幕,只在初始化時有效,不能動態變更  
      autoplay Boolean false 是否自動播放  
      loop Boolean false 是否循環播放 1.4.0
      muted Boolean false 是否靜音播放 1.4.0
      page-gesture Boolean false 在非全屏模式下,是否開啟亮度與音量調節手勢 1.6.0
      direction Number   設置全屏時視頻的方向,不指定則根據寬高比自動判斷。有效值為 0(正常豎向), 90(屏幕逆時針90度), -90(屏幕順時針90度) 1.7.0
      bindplay EventHandle   當開始/繼續播放時觸發play事件  
      bindpause EventHandle   當暫停播放時觸發 pause 事件  
      bindended EventHandle   當播放到末尾時觸發 ended 事件  
      bindtimeupdate EventHandle   播放進度變化時觸發,event.detail = {currentTime, duration} 。觸發頻率 250ms 一次  
      bindfullscreenchange EventHandle   當視頻進入和退出全屏是觸發,event.detail = {fullScreen, direction},direction取為 vertical 或 horizontal 1.4.0
      objectFit String contain 當視頻大小與 video 容器大小不一致時,視頻的表現形式。contain:包含,fill:填充,cover:覆蓋  
      poster String   視頻封面的圖片網絡資源地址,如果 controls 屬性值為 false 則設置 poster 無效  

      地圖(Map):

      組件名 注釋 組件屬性
      屬性名 類型 默認值 說明 最低版本
      map 地圖 longitude Number   中心經度  
      latitude Number   中心緯度  
      scale Number 16 縮放級別,取值范圍為5-18  
      markers Array   標記點  
      covers Array   即將移除,請使用 markers  
      polyline Array   路線  
      circles Array    
      controls Array   控件  
      include-points Array   縮放視野以包含所有給定的坐標點  
      show-location Boolean   顯示帶有方向的當前定位點  
      bindmarkertap EventHandle   點擊標記點時觸發  
      bindcallouttap EventHandle   點擊標記點對應的氣泡時觸發 1.2.0
      bindcontroltap EventHandle   點擊控件時觸發  
      bindregionchange EventHandle   視野發生變化時觸發  
      bindtap EventHandle   點擊地圖時觸發  
      bindupdated EventHandle   在地圖渲染更新完成時觸發 1.6.0

      畫布(Canvas):

      組件名 注釋 組件屬性
      屬性名 類型 默認值 說明 最低版本
      canvas 畫布 src String   要播放視頻的資源地址  
      initial-time Number   指定視頻初始播放位置 1.6.0
      duration Number   指定視頻時長 1.1.0
      controls Boolean true 是否顯示默認播放控件(播放/暫停按鈕、播放進度、時間)  
      danmu-list Object Array   彈幕列表  
      danmu-btn Boolean false 是否顯示彈幕按鈕,只在初始化時有效,不能動態變更  
      enable-danmu Boolean false 是否展示彈幕,只在初始化時有效,不能動態變更  
      autoplay Boolean false 是否自動播放  
      loop Boolean false 是否循環播放 1.4.0
      muted Boolean false 是否靜音播放 1.4.0
      page-gesture Boolean false 在非全屏模式下,是否開啟亮度與音量調節手勢 1.6.0
      direction Number   設置全屏時視頻的方向,不指定則根據寬高比自動判斷。有效值為 0(正常豎向), 90(屏幕逆時針90度), -90(屏幕順時針90度) 1.7.0
      show-progress Boolean true 若不設置,寬度大于240時才會顯示 1.9.0
      show-fullscreen-btn Boolean true 是否顯示全屏按鈕 1.9.0
      show-play-btn Boolean true 是否顯示視頻底部控制欄的播放按鈕 1.9.0
      show-center-play-btn Boolean true 是否顯示視頻中間的播放按鈕 1.9.0
      enable-progress-gesture Boolean true 是否開啟控制進度的手勢 1.9.0
      bindplay EventHandle   當開始/繼續播放時觸發play事件  
      bindpause EventHandle   當暫停播放時觸發 pause 事件  
      bindended EventHandle   當播放到末尾時觸發 ended 事件  
      bindtimeupdate EventHandle   播放進度變化時觸發,event.detail = {currentTime, duration} 。觸發頻率 250ms 一次  
      bindfullscreenchange EventHandle   當視頻進入和退出全屏是觸發,event.detail = {fullScreen, direction},direction取為 vertical 或 horizontal 1.4.0
      objectFit String contain 當視頻大小與 video 容器大小不一致時,視頻的表現形式。contain:包含,fill:填充,cover:覆蓋  
      poster String   視頻封面的圖片網絡資源地址,如果 controls 屬性值為 false 則設置 poster 無效  

      您最近使用了:

      收藏 菜單 QQ
      337p粉嫩日本欧洲亚洲大胆_国产99视频精品免费专区_国产精品亚洲专区无码破解版