×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：page-query-form查询类服务模板

page-query-form 查询类服务模板

从开发者工具 v2.25.1-rc 版本开始支持。

解释：本模板适用于成绩查询、证书查询等查询类服务项开发工作，模板内包含的组件丰富，覆盖大多数查询类服务项场景，开发者仅需通过调整组件属性以及排序即可快速完成前端开发工作。

示例

扫码体验

代码示例

请使用百度APP扫码

页面内容

模板包含两个页面：查询参数填写页、查询结果页。

查询参数填写页

包括信息输入操作常用组件，例如输入框、日期选择器、位置选择器等，同时结合政务查询类服务特性，模板内包含了弹窗组件，当用户进入服务页面时，可通过弹窗对用户进行强提醒，加强信息的触达效果，保障用户办理查询类服务时的使用体验。

页面路径：pages/index/index

代码示例

 
 
 
    
  
  
  
    2. 
  
  
  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  s-if="{{showNoticeBar}}"
    5. 
  
  
  
  5.  text="{{noticeContent}}">
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  data-id="iptOne"
    9. 
  
  
  
  9.  ipt-item-type="short"
    10. 
  
  
  
  10.  type="text"
    11. 
  
  
  
  11.  ipt-title="输入框"
    12. 
  
  
  
  12.  placeholder-content="请输入内容"
    13. 
  
  
  
  13.  ipt-value="{{model.iptOne.iptValue}}"
    14. 
  
  
  
  14.  bindkeyinput="bindInput"
    15. 
  
  
  
  15.  bindiptblur="bindBlur"
    16. 
  
  
  
  16.  bindiptclean="cleanRoad"
    17. 
  
  
  
  17.  ipt-error-info="{{model.iptOne.iptErrorInfo}}">
    18. 
  
  
  
  18.  
    19. 
  
  
  
  19.  
    20. 
  
  
  
  20.  placeholder="请选择选项"
    21. 
  
  
  
  21.  label-width="4em"
    22. 
  
  
  
  22.  range-key="type"
    23. 
  
  
  
  23.  errColor="#C40311"
    24. 
  
  
  
  24.  value="{{model.pickerOne.iptValue}}"
    25. 
  
  
  
  25.  bindchange="pickerOne"
    26. 
  
  
  
  26.  label="选择框"
    27. 
  
  
  
  27.  range="{{optionsOne}}">
    28. 
  
  
  
  28.  
    29. 
  
  
  
  29.  
    30. 
  
  
  
  30.  data-id="password"
    31. 
  
  
  
  31.  ipt-item-type="short"
    32. 
  
  
  
  32.  type="text"
    33. 
  
  
  
  33.  ipt-title="密码框"
    34. 
  
  
  
  34.  placeholder-content="请输入密码"
    35. 
  
  
  
  35.  ipt-value="{{model.password.iptValue}}"
    36. 
  
  
  
  36.  password="true"
    37. 
  
  
  
  37.  bindkeyinput="bindInput"
    38. 
  
  
  
  38.  bindiptblur="bindBlur"
    39. 
  
  
  
  39.  bindiptclean="cleanRoad"
    40. 
  
  
  
  40.  ipt-error-info="{{model.password.iptErrorInfo}}">
    41. 
  
  
  
  41.  
    42. 
  
  
  
  42.  
    43. 
  
  
  
  43.  data-id="idCard"
    44. 
  
  
  
  44.  ipt-item-type="short"
    45. 
  
  
  
  45.  type="idcard"
    46. 
  
  
  
  46.  ipt-title="身份证号"
    47. 
  
  
  
  47.  placeholder-content="请输入身份证号"
    48. 
  
  
  
  48.  ipt-value="{{model.idCard.iptValue}}"
    49. 
  
  
  
  49.  maxlength="18"
    50. 
  
  
  
  50.  bindkeyinput="bindInput"
    51. 
  
  
  
  51.  bindiptblur="bindBlur"
    52. 
  
  
  
  52.  bindiptclean="cleanRoad"
    53. 
  
  
  
  53.  ipt-error-info="{{model.idCard.iptErrorInfo}}">
    54. 
  
  
  
  54.  
    55. 
  
  
  
  55.  
    56. 
  
  
  
  56.  data-id="phone"
    57. 
  
  
  
  57.  ipt-item-type="short"
    58. 
  
  
  
  58.  type="number"
    59. 
  
  
  
  59.  maxlength="11"
    60. 
  
  
  
  60.  ipt-title="手机号"
    61. 
  
  
  
  61.  placeholder-content="请输入手机号"
    62. 
  
  
  
  62.  ipt-value="{{model.phone.iptValue}}"
    63. 
  
  
  
  63.  bindkeyinput="bindInput"
    64. 
  
  
  
  64.  bindiptblur="bindBlur"
    65. 
  
  
  
  65.  bindiptclean="cleanRoad"
    66. 
  
  
  
  66.  ipt-error-info="{{model.phone.iptErrorInfo}}">
    67. 
  
  
  
  67.  
    68. 
  
  
  
  68.  
    69. 
  
  
  
  69.  data-id="smsInput"
    70. 
  
  
  
  70.  type="number"
    71. 
  
  
  
  71.  label-width="4em"
    72. 
  
  
  
  72.  max-length="{{6}}"
    73. 
  
  
  
  73.  bindkeyinput="bindInput"
    74. 
  
  
  
  74.  bindiptblur="bindBlur"
    75. 
  
  
  
  75.  bindsmssend="smssend"
    76. 
  
  
  
  76.  placeholder-content="请输入短信验证码"
    77. 
  
  
  
  77.  ipt-value="{{model.smsInput.iptValue}}"
    78. 
  
  
  
  78.  ipt-error-color="#C40311"
    79. 
  
  
  
  79.  ipt-error-flag="{{model.smsInput.iptErrorInfo.errFlag}}">
    80. 
  
  
  
  80.  
    81. 
  
  
  
  81.  
    82. 
  
  
  
  82.  
    83. 
  
  
  
  83.  data-id="govCaptcha"
    84. 
  
  
  
  84.  type="number"
    85. 
  
  
  
  85.  ipt-area-width="4em"
    86. 
  
  
  
  86.  max-length="{{4}}"
    87. 
  
  
  
  87.  verify-img-url="{{model.govCaptcha.codeImg}}"
    88. 
  
  
  
  88.  bindkeyinput="bindInput"
    89. 
  
  
  
  89.  bindiptblur="bindBlur"
    90. 
  
  
  
  90.  bindrefreshimg="reloadImg"
    91. 
  
  
  
  91.  ipt-value="{{model.govCaptcha.iptValue}}"
    92. 
  
  
  
  92.  ipt-error-info="{{model.govCaptcha.iptErrorInfo.errFlag}}">
    93. 
  
  
  
  93.  
    94. 
  
  
  
  94.  
    95. 
  
  
  
  95.  data-id="pickerDate"
    96. 
  
  
  
  96.  placeholder="请选择日期"
    97. 
  
  
  
  97.  label-width="4em"
    98. 
  
  
  
  98.  mode="date"
    99. 
  
  
  
  99.  start="2020-01-01"
    100. 
  
  
  
  100.  end="2025-12-31"
    101. 
  
  
  
  101.  value="{{model.pickerDate.iptValue}}" 
    102. 
  
  
  
  102.  bindchange="pickerDate"
    103. 
  
  
  
  103.  label="日期">
    104. 
  
  
  
  104.  
    105. 
  
  
  
  105.  
    106. 
  
  
  
  106.  placeholder="请选择所在地区"
    107. 
  
  
  
  107.  mode="region"
    108. 
  
  
  
  108.  label-width="4em"
    109. 
  
  
  
  109.  value="{{model.pickerRegion.iptValue}}" 
    110. 
  
  
  
  110.  bindchange="pickerRegion"
    111. 
  
  
  
  111.  label="所在地区">
    112. 
  
  
  
  112.  
    113. 
  
  
  
  113.  
    114. 
  
  
  
  114.  
    115. 
  
  
  
  115.  button-size="large"
    116. 
  
  
  
  116.  button-text="查询"
    117. 
  
  
  
  117.  button-disabled="{{buttonDisabled}}"
    118. 
  
  
  
  118.  data-isValidata="true"
    119. 
  
  
  
  119.  button-color="#2772FB"
    120. 
  
  
  
  120.  bindtap="buttonImportant">
    121. 
  
  
  
  121.  
    122. 
  
  
  
  122.  
    123. 
  
  
  
  123.  
    124. 
  
  
  
  124.  button-size="large"
    125. 
  
  
  
  125.  button-text="辅助按钮"
    126. 
  
  
  
  126.  button-color="plain"
    127. 
  
  
  
  127.  bindtap="buttonTap">
    128. 
  
  
  
  128.  
    129. 
  
  
  
  129.  
    130. 
  
  
  
  130.  
    131. 
  
  
  
  131.  温馨提示：
    132. 
  
  
  
  132.  
    133. 
  
  
  
  133.  此板块为提示区，可用于提醒用户业务填写中的注意事项及要求
    134. 
  
  
  
  134.  点击查看
    135. 
  
  
  
  135.  
    136. 
  
  
  
  136.  
    137. 
  
  
  
  137.  
    138. 
  
  
  
    139. 
 
 
 
 
 
 
    
  
  
  
  1. {
    2. 
  
  
  
  2.  "navigationBarTitleText": "标题文字",
    3. 
  
  
  
  3.  "navigationBarBackgroundColor": "#ffffff",
    4. 
  
  
  
  4.  "navigationBarTextStyle": "dark",
    5. 
  
  
  
  5.  "usingComponents": {
    6. 
  
  
  
  6.  "gov-picker": "@smt-ui/component-gov/src/picker",
    7. 
  
  
  
  7.  "gov-notice-bar": "@smt-ui/component-gov/src/notice-bar",
    8. 
  
  
  
  8.  "gov-sms-input": "@smt-ui/component-gov/src/sms-input",
    9. 
  
  
  
  9.  "gov-prompt": "@smt-ui/component-gov/src/prompt",
    10. 
  
  
  
  10.  "gov-captcha": "@smt-ui/component-gov/src/captcha",
    11. 
  
  
  
  11.  "gov-button": "@smt-ui/component-gov/src/button",
    12. 
  
  
  
  12.  "gov-input": "@smt-ui/component-gov/src/input"
    13. 
  
  
  
  13.  }
    14. 
  
  
  
  14. }
    15.

  • 页面初始化。可进行办理前提示和初始化数据等操作

  • JS

 
 
 
    
  
  
  
  1. onLoad() {
    2. 
  
  
  
  2.  // 初始化图形验证码
    3. 
  
  
  
  3.  this.reloadImg();
    4. 
  
  
  
  4.  // 办理前提示
    5. 
  
  
  
  5.  swan.showModal({
    6. 
  
  
  
  6.  title: '提示',
    7. 
  
  
  
  7.  content: '此弹窗可在业务办理前对用户进行预先提醒',
    8. 
  
  
  
  8.  showCancel: false,
    9. 
  
  
  
  9.  confirmText: '我知道了'
    10. 
  
  
  
  10.  });
    11. 
  
  
  
  11. }
    12.

  • 输入框事件。包含普通输入框、密码输入框、身份证输入框、手机号输入框、短信验证码输入框、图形验证码输入框。

  • JS

 
 
 
    
  
  
  
  1. /**
    2. 
  
  
  
  2.  * 输入框的 input 事件
    3. 
  
  
  
  3.  *
    4. 
  
  
  
  4.  * @param {Event} e 事件对象
    5. 
  
  
  
  5.  */
    6. 
  
  
  
  6. bindInput(e) {
    7. 
  
  
  
  7.  // 将 input 输入的值赋给 model 中对应属性的 iptValue 字段， 用于后续校验和提交表单使用
    8. 
  
  
  
  8.  this.setData({
    9. 
  
  
  
  9.  ['model.' + e.currentTarget.dataset.id + '.iptValue']: e.detail.iptvalue
    10. 
  
  
  
  10.  });
    11. 
  
  
  
  11.  // 每次输入完成时判断查询按钮是否高亮显示
    12. 
  
  
  
  12.  this.buttonImportant({});
    13. 
  
  
  
  13. }
    14. 
  
  
  
    15. 
  
  
  
  15. /**
    16. 
  
  
  
  16.  * 输入框的 blur 事件，失焦时通过 validata 方法对当前输入框的值进行校验
    17. 
  
  
  
  17.  *
    18. 
  
  
  
  18.  * @param {Event} e 事件对象
    19. 
  
  
  
  19.  */
    20. 
  
  
  
  20. bindBlur(e) {
    21. 
  
  
  
  21.  let iptvalue = e.detail.iptvalue;
    22. 
  
  
  
  22.  let iptid = e.currentTarget.dataset.id;
    23. 
  
  
  
  23.  let rulse = this.data.model[iptid].rulse;
    24. 
  
  
  
  24.  this.validata(rulse, iptvalue, iptid);
    25. 
  
  
  
  25. }
    26. 
  
  
  
    27. 
  
  
  
  27. /**
    28. 
  
  
  
  28.  * 点击输入框右侧清除按钮事件，短信验证码输入框、图形验证码输入框没有该事件
    29. 
  
  
  
  29.  *
    30. 
  
  
  
  30.  * @param {Event} e 事件对象
    31. 
  
  
  
  31.  */
    32. 
  
  
  
  32. cleanRoad(e) {
    33. 
  
  
  
  33.  // 清空当前表单内数据
    34. 
  
  
  
  34.  this.setData({['model.' + e.currentTarget.dataset.id + '.iptValue']: ''});
    35. 
  
  
  
  35. }
    36.

  • 选择器的 change 事件处理。包含普通选择器、日期选择器、地区选择器

  • JS

 
 
 
    
  
  
  
  1. /**
    2. 
  
  
  
  2.  * 普通选择器的 change 事件
    3. 
  
  
  
  3.  *
    4. 
  
  
  
  4.  * @param {Object} detail 事件对象信息
    5. 
  
  
  
  5.  */
    6. 
  
  
  
  6. pickerOne({detail}) {
    7. 
  
  
  
  7.  // 将 picker 选中值赋给 model 中对应的属性
    8. 
  
  
  
  8.  this.setData('model.pickerOne.iptValue', detail.detail.value);
    9. 
  
  
  
  9.  // 选择完成时判断查询按钮是否高亮显示
    10. 
  
  
  
  10.  this.buttonImportant({});
    11. 
  
  
  
  11. }
    12. 
  
  
  
    13. 
  
  
  
  13. /**
    14. 
  
  
  
  14.  * 时间选择器的 change 事件
    15. 
  
  
  
  15.  *
    16. 
  
  
  
  16.  * @param {Object} detail 事件对象信息
    17. 
  
  
  
  17.  */
    18. 
  
  
  
  18. pickerDate({detail}) {
    19. 
  
  
  
  19.  // 将 picker 选中值赋给 model 中对应的属性
    20. 
  
  
  
  20.  this.setData('model.pickerDate.iptValue', detail.detail.value);
    21. 
  
  
  
  21.  // 选择完成时判断查询按钮是否高亮显示
    22. 
  
  
  
  22.  this.buttonImportant({});
    23. 
  
  
  
  23. }
    24. 
  
  
  
    25. 
  
  
  
  25. /**
    26. 
  
  
  
  26.  * 地区选择器的 change 事件
    27. 
  
  
  
  27.  *
    28. 
  
  
  
  28.  * @param {Object} detail 事件对象信息
    29. 
  
  
  
  29.  */
    30. 
  
  
  
  30. pickerRegion({detail}) {
    31. 
  
  
  
  31.  // 将 picker 选中值赋给 model 中对应的属性
    32. 
  
  
  
  32.  this.setData('model.pickerRegion.iptValue', detail.detail.value);
    33. 
  
  
  
  33.  // 选择完成时判断查询按钮是否高亮显示
    34. 
  
  
  
  34.  this.buttonImportant({});
    35. 
  
  
  
  35. }
    36.

  • 点击图形验证码事件

  • JS

 
 
 
    
  
  
  
  1. /**
    2. 
  
  
  
  2.  * 图形验证码的点击事件，可以增加刷新图片验证码或者其他需要的操作
    3. 
  
  
  
  3.  */
    4. 
  
  
  
  4. reloadImg() {
    5. 
  
  
  
  5.  swan.request({
    6. 
  
  
  
  6.  // 仅为示例，并非真实的接口地址
    7. 
  
  
  
  7.  url: 'http://www.baidu.com',
    8. 
  
  
  
  8.  success: res => {
    9. 
  
  
  
  9.  this.setData({
    10. 
  
  
  
  10.  // codeImg 字段根据业务自行调整
    11. 
  
  
  
  11.  'model.govCaptcha.codeImg': res.data.codeImg
    12. 
  
  
  
  12.  })
    13. 
  
  
  
  13.  },
    14. 
  
  
  
  14.  fail: err => {
    15. 
  
  
  
  15.  // 接口异常的处理代码
    16. 
  
  
  
  16.  }
    17. 
  
  
  
  17.  })
    18. 
  
  
  
  18. }
    19.

  • 获取手机验证码事件

  • JS

 
 
 
    
  
  
  
  1. /**
    2. 
  
  
  
  2.  * 手机号验证码组件点击获取验证码的事件
    3. 
  
  
  
  3.  */
    4. 
  
  
  
  4. smssend() {
    5. 
  
  
  
  5.  // 该方法模拟收到短信验证码的toast效果，实际场景请使用开发者自己的短信验证码服务
    6. 
  
  
  
  6.  swan.showToast({
    7. 
  
  
  
  7.  title: '验证码：123456',
    8. 
  
  
  
  8.  icon: 'none'
    9. 
  
  
  
  9.  });
    10. 
  
  
  
  10. }
    11.

  • 页面下方“温馨提示”的“点击查看”的事件

  • JS

 
 
 
    
  
  
  
  1. /**
    2. 
  
  
  
  2.  * 页面下方“温馨提示”的 “点击查看” 事件处理
    3. 
  
  
  
  3.  */
    4. 
  
  
  
  4. toView() {
    5. 
  
  
  
  5.  // 此处仅为示例，您可以自定义该事件的逻辑，比如跳转到某个页面等
    6. 
  
  
  
  6.  swan.navigateTo({url: '/pages/index/index'});
    7. 
  
  
  
  7. }
    8.

  • 查询按钮点击事件

  • JS

 
 
 
    
  
  
  
  1. /**
    2. 
  
  
  
  2.  * 查询按钮点击事件
    3. 
  
  
  
  3.  *
    4. 
  
  
  
  4.  * @param {Event} e 事件对象
    5. 
  
  
  
  5.  */
    6. 
  
  
  
  6. buttonImportant(e) {
    7. 
  
  
  
  7.  // 判断表单是否全部填写了
    8. 
  
  
  
  8.  for (let i in this.data.model) {
    9. 
  
  
  
  9.  if (!String(this.data.model[i].iptValue).trim()) {
    10. 
  
  
  
  10.  return;
    11. 
  
  
  
  11.  }
    12. 
  
  
  
  12.  }
    13. 
  
  
  
  13.  // 如果表单的必填项都已填写则查询按钮高亮
    14. 
  
  
  
  14.  this.setData({buttonDisabled: false});
    15. 
  
  
  
  15.  // 只有手动点击查询按钮的时候才会执行校验，通过按钮组件的 data-isValidata 属性控制是否需要走校验逻辑
    16. 
  
  
  
  16.  if (e.currentTarget && e.currentTarget.dataset.isValidata) {
    17. 
  
  
  
  17.  for (let i in this.data.model) {
    18. 
  
  
  
  18.  let itemData = this.data.model[i];
    19. 
  
  
  
  19.  if (itemData.iptErrorInfo) {
    20. 
  
  
  
  20.  if (this.validata(itemData.rulse, itemData.iptValue, i, true)) {
    21. 
  
  
  
  21.  return;
    22. 
  
  
  
  22.  }
    23. 
  
  
  
  23.  }
    24. 
  
  
  
  24.  }
    25. 
  
  
  
  25.  // 此处表单已校验通过，您可以自定义一些自己的逻辑，比如跳转到查询结果页模板
    26. 
  
  
  
  26.  swan.navigateTo({
    27. 
  
  
  
  27.  url: '/@smt-ui-template-gov-query-form/pages/result/result'
    28. 
  
  
  
  28.  });
    29. 
  
  
  
  29.  }
    30. 
  
  
  
  30. }
    31.

查询结果页

页面用于承载查询结果，将查询结果信息结构化呈现，便于用户阅读理解。
页面路径：pages/result/result

代码示例

  • SWAN
  • JSON
  • JS
 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  s-if="{{statePageType}}"
    4. 
  
  
  
  4.  class="page-status"
    5. 
  
  
  
  5.  icon="{{statePageConfig[statePageType].icon}}"
    6. 
  
  
  
  6.  title="{{statePageConfig[statePageType].title}}"
    7. 
  
  
  
  7.  desc="{{statePageConfig[statePageType].desc}}"
    8. 
  
  
  
  8.  showBtn="{{statePageConfig[statePageType].showBtn}}"
    9. 
  
  
  
  9.  smtreloading="{{reLoad}}"
    10. 
  
  
  
  10.  loading="{{statePageType === 'loading'}}"
    11. 
  
  
  
  11.  >
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15.  
    16. 
  
  
  
  16.  label-width="6em"
    17. 
  
  
  
  17.  label="{{item.name}}"
    18. 
  
  
  
  18.  gov-label="list-label"
    19. 
  
  
  
  19.  border
    20. 
  
  
  
  20.  >
    21. 
  
  
  
  21.  
    22. 
  
  
  
  22.  
    23. 
  
  
  
  23.  
    24. 
  
  
  
  24.  s-for="ele in item.value"
    25. 
  
  
  
  25.  bindtap="callPhone"
    26. 
  
  
  
  26.  data-phoneNum="{{ele}}"
    27. 
  
  
  
  27.  >{{ele}} 
    28. 
  
  
  
  28.  
    29. 
  
  
  
  29.  
    30. 
  
  
  
  30.  s-else
    31. 
  
  
  
  31.  text="{{item.value}}"
    32. 
  
  
  
  32.  line="{{item.line}}"
    33. 
  
  
  
  33.  gov-text-collapse-content="list-text"
    34. 
  
  
  
  34.  >
    35. 
  
  
  
  35.  
    36. 
  
  
  
  36.  
    37. 
  
  
  
  37.  
    38. 
  
  
  
  38.  
    39. 
  
  
  
  39.  
    40. 
  
  
  
  40.  温馨提示：
    41. 
  
  
  
  41.  
    42. 
  
  
  
  42.  这里是温馨提示这里是温馨提示这里是温馨提示这里是温馨提示这里是温馨提示这里是温馨提示
    43. 
  
  
  
  43.  点击查看
    44. 
  
  
  
  44.  
    45. 
  
  
  
  45.  
    46. 
  
  
  
  46.  
    47. 
  
  
  
  47.  
    48. 
  
  
  
    49. 
 
 
 
 
 
 
    
  
  
  
  1. {
    2. 
  
  
  
  2.  "navigationBarTitleText": "查询结果",
    3. 
  
  
  
  3.  "navigationBarBackgroundColor": "#ffffff",
    4. 
  
  
  
  4.  "navigationBarTextStyle": "dark",
    5. 
  
  
  
  5.  "usingComponents": {
    6. 
  
  
  
  6.  "gov-page-title":"@smt-ui/component-gov/src/page-title",
    7. 
  
  
  
  7.  "gov-list-item": "@smt-ui/component-gov/src/list-item",
    8. 
  
  
  
  8.  "gov-text-collapse": "@smt-ui/component-gov/src/text-collapse",
    9. 
  
  
  
  9.  "smt-page-status": "@smt-ui/component/src/page-status",
    10. 
  
  
  
  10.  "gov-prompt": "@smt-ui/component-gov/src/prompt"
    11. 
  
  
  
  11.  }
    12. 
  
  
  
  12. }
    13. 
 
 
 
 
 
 
    
  
  
  
  1. Page({
    2. 
  
  
  
  2.  data: {
    3. 
  
  
  
  3.  // warning 服务开小差、noContent 未查询到信息、noNetwork 无网络、不显示错误页则为空字符串
    4. 
  
  
  
  4.  statePageType: 'loading'
    5. 
  
  
  
  5.  },
    6. 
  
  
  
    7. 
  
  
  
  7.  onLoad() {
    8. 
  
  
  
  8.  // 使用定时器模拟请求，模拟 loading 显示两秒钟
    9. 
  
  
  
  9.  setTimeout(() => {
    10. 
  
  
  
  10.  this.data.statePageType = '';
    11. 
  
  
  
  11.  }, 2000)
    12. 
  
  
  
  12.  },
    13. 
  
  
  
    14. 
  
  
  
  14.  /**
    15. 
  
  
  
  15.  * 点击电话调起拨号
    16. 
  
  
  
  16.  *
    17. 
  
  
  
  17.  * @param {Event} e 事件对象
    18. 
  
  
  
  18.  */
    19. 
  
  
  
  19.  callPhone(e) {
    20. 
  
  
  
  20.  swan.makePhoneCall({
    21. 
  
  
  
  21.  phoneNumber: e.currentTarget.dataset.phoneNum
    22. 
  
  
  
  22.  });
    23. 
  
  
  
  23.  },
    24. 
  
  
  
    25. 
  
  
  
  25.  /**
    26. 
  
  
  
  26.  * 页面下方“温馨提示”的 “点击查看” 事件处理
    27. 
  
  
  
  27.  */
    28. 
  
  
  
  28.  toView() {
    29. 
  
  
  
  29.  swan.showToast({
    30. 
  
  
  
  30.  title: '点击查看',
    31. 
  
  
  
  31.  icon: 'none'
    32. 
  
  
  
  32.  });
    33. 
  
  
  
  33.  }
    34. 
  
  
  
  34. });
    35.

npm 依赖

名称 版本号
@smt-ui/component-govlatest
@smt-ui/componentlatest

Bug & Tip

  • Tip：该模板使用了 ES6 语法，需要开启开发者工具的增强编译，操作步骤参看开启说明；同时也需开启上传代码时样式自动补全。
  • Tip：以上代码示例为纯客户端代码，可直接在模拟器和真机预览。
  • Tip：模板中使用的是测试数据，你需要从接口中获取真实的数据。

本文题目：创新互联百度小程序教程：page-query-form查询类服务模板
URL标题：http://cdbrznjsb.com/article/dhoddsc.html

其他资讯

  • 网站建设专属方案

  • 网站定制化设计

  • 7X24小时服务

  • N对管家服务

让你的专属顾问为你服务