支付寶小程序擴展表單 搜索框·SearchBar

2020-09-18 11:22 更新

搜索提供了用戶進行文本查詢的功能,用戶可以針對當前頁面的內(nèi)容通過精確搜索和模糊搜索進行內(nèi)容篩選和定位,提高查詢效率。搜索欄激活后出現(xiàn)取消按鈕。

說明:僅用于 UI 展示沒有對應(yīng)的業(yè)務(wù)邏輯功能。

掃碼體驗

示例代碼

  1. {
  2. "defaultTitle": "Search-bar",
  3. "usingComponents": {
  4. "search-bar": "mini-ali-ui/es/search-bar/index"
  5. }
  6. }
  7. <view>
  8. <search-bar
  9. value="{{value}}"
  10. focus="{{true}}"
  11. disabled="{{false}}"
  12. maxLength="{{20}}"
  13. showVoice="{{showVoice}}"
  14. placeholder="搜索"
  15. onInput="handleInput"
  16. onClear="handleClear"
  17. onFocus="handleFocus"
  18. onBlur="handleBlur"
  19. onCancel="handleCancel"
  20. onSubmit="handleSubmit"
  21. showCancelButton="{{false}}" />
  22. </view>
  23. <view>是否展示Voice圖標
  24. <checkbox onChange='onChange'/>
  25. </view>
  26. Page({
  27. data: {
  28. value: '',
  29. showVoice: false,
  30. },
  31. handleInput(value) {
  32. this.setData({
  33. value,
  34. });
  35. },
  36. handleClear() {
  37. this.setData({
  38. value: '',
  39. });
  40. },
  41. handleFocus() {},
  42. handleBlur() {},
  43. handleCancel() {
  44. this.setData({
  45. value: '',
  46. });
  47. },
  48. onChange(e) {
  49. this.setData({
  50. showVoice: e.detail.value,
  51. });
  52. },
  53. });

屬性

屬性 類型 默認值 描述
value String - 搜索框的當前值。
placeholder String - placeholder。
focus Boolean false 自動獲取光標。可選值:true、false。
showVoice Boolean false 是否展示voice圖標??蛇x值:true、false。
onInput (value: String) => void - 鍵盤輸入時觸發(fā)。
onClear (val: String) => void - 點擊 clear 圖標觸發(fā)。
onFocus () => void - 獲取焦點時觸發(fā)。
onBlur () => void - 失去焦點時觸發(fā)。
onCancel () => void - 點擊取消時觸發(fā)。
onVoiceClick () => void - 點擊 voice 圖標時觸發(fā)。
onSubmit (val: String) => void - 點擊鍵盤的 enter 時觸發(fā)。
disabled Boolean false 設(shè)置禁用??蛇x值:true、false。
maxLength Number - 最多允許輸入的字符個數(shù)。
showCancelButton Boolean false 是否一直顯示取消按鈕??蛇x值:true、false。
borderColor String #1677ff 搜索輸入框邊框色。
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號