×
13518219792

建站动态

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

创新互联百度小程序教程：refresh刷新

refresh 刷新

解释：可用于页面任意区域；使用时需自行添加下拉逻辑改变 offset-y 参数；smt-feed 组件对 smt-refresh 进行了封装，支持手势交互和 API 调起刷新。

网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了秦皇岛免费建站欢迎大家使用！

属性说明

属性名 类型 必填 默认值 说明

theme

String

否

-

主题配置，默认浅色；深色主题请指定 dark

loadingHgt

Number

否

192px（需转换为设备尺寸）

加载区域高度

offsetY

Number

否

0

垂直移动距离，建议后续在 sjs 中使用

status

Number

否

0

加载状态，0：未开始，1：加载中，2：展示话术

text

String

否

建议最多显示 18 个汉字，超出内容截断

加载成功时的展示话术

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.  手动下拉刷新
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.  class="smt-card-area"
    10. 
  
  
  
  10.  catch:touchstart="noop"
    11. 
  
  
  
  11.  catch:touchmove="noop"
    12. 
  
  
  
  12.  catch:touchend="noop"
    13. 
  
  
  
  13.  >
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15.  class="smt-feed pull-down-refresh"
    16. 
  
  
  
  16.  ext-cls-feed="custom-cls-feed"
    17. 
  
  
  
  17.  ext-cls-loading="custom-cls-loading"
    18. 
  
  
  
  18.  theme="{{theme}}"
    19. 
  
  
  
  19.  pull-to-refresh
    20. 
  
  
  
  20.  bind:refresh="onRefresh"
    21. 
  
  
  
  21.  text="{{pullText}}"
    22. 
  
  
  
  22.  >
    23. 
  
  
  
  23.  
    24. 
  
  
  
  24.  
    25. 
  
  
  
  25.  class="{{'list-item ' + (val === 1 ? 'first' : '')}}"
    26. 
  
  
  
  26.  s-for="val in list"
    27. 
  
  
  
  27.  style="{{theme === 'dark' ? 'border-bottom: solid 1px rgba(255, 255, 255, .2);' : 'border-bottom: solid 1px #e0e0e0;'}}"
    28. 
  
  
  
  28.  key="{{val}}"
    29. 
  
  
  
  29.  >
    30. 
  
  
  
  30.  
    31. 
  
  
  
  31.  
    32. 
  
  
  
  32.  
    33. 
  
  
  
  33.  
    34. 
  
  
  
  34.  
    35. 
  
  
  
  35.  
    36. 
  
  
  
  36.  
    37. 
  
  
  
  37.  
    38. 
  
  
  
  38.  
    39. 
  
  
  
  39.  
    40. 
  
  
  
  40.  
    41. 
  
  
  
    42. 
  
  
  
  42.  
    43. 
  
  
  
  43.  
    44. 
  
  
  
  44.  
    45. 
  
  
  
  45.  自动刷新
    46. 
  
  
  
  46.  
    47. 
  
  
  
  47.  
    48. 
  
  
  
  48.  
    49. 
  
  
  
  49.  
    50. 
  
  
  
  50.  class="smt-feed auto-refresh"
    51. 
  
  
  
  51.  ext-cls-feed="custom-cls-feed"
    52. 
  
  
  
  52.  theme="{{theme}}"
    53. 
  
  
  
  53.  disable-touch
    54. 
  
  
  
  54.  text="{{autoRefreshText}}"
    55. 
  
  
  
  55.  >
    56. 
  
  
  
  56.  
    57. 
  
  
  
  57.  
    58. 
  
  
  
  58.  class="{{'list-item ' + (val === 1 ? 'first' : '')}}"
    59. 
  
  
  
  59.  s-for="val in list"
    60. 
  
  
  
  60.  style="{{theme === 'dark' ? 'border-bottom: solid 1px rgba(255, 255, 255, .2);' : 'border-bottom: solid 1px #e0e0e0;'}}"
    61. 
  
  
  
  61.  key="{{val}}"
    62. 
  
  
  
  62.  >
    63. 
  
  
  
  63.  
    64. 
  
  
  
  64.  
    65. 
  
  
  
  65.  
    66. 
  
  
  
  66.  
    67. 
  
  
  
  67.  
    68. 
  
  
  
  68.  
    69. 
  
  
  
  69.  
    70. 
  
  
  
  70.  
    71. 
  
  
  
  71.  
    72. 
  
  
  
  72.  
    73. 
  
  
  
  73.  
    74. 
  
  
  
    75. 
  
  
  
  75.  
    76. 
  
  
  
  76.  
    77. 
  
  
  
  77.  
    78. 
  
  
  
  78.  刷新失败
    79. 
  
  
  
  79.  
    80. 
  
  
  
  80.  
    81. 
  
  
  
  81.  
    82. 
  
  
  
  82.  刷新失败
    83. 
  
  
  
  83.  
    84. 
  
  
  
  84.  class="smt-feed auto-refresh-fail"
    85. 
  
  
  
  85.  ext-cls-feed="custom-cls-feed"
    86. 
  
  
  
  86.  theme="{{theme}}"
    87. 
  
  
  
  87.  disable-touch
    88. 
  
  
  
  88.  >
    89. 
  
  
  
  89.  
    90. 
  
  
  
  90.  
    91. 
  
  
  
  91.  class="{{'list-item ' + (val === 1 ? 'first' : '')}}"
    92. 
  
  
  
  92.  s-for="val in list"
    93. 
  
  
  
  93.  style="{{theme === 'dark' ? 'border-bottom: solid 1px rgba(255, 255, 255, .2);' : 'border-bottom: solid 1px #e0e0e0;'}}"
    94. 
  
  
  
  94.  key="{{val}}"
    95. 
  
  
  
  95.  >
    96. 
  
  
  
  96.  
    97. 
  
  
  
  97.  
    98. 
  
  
  
  98.  
    99. 
  
  
  
  99.  
    100. 
  
  
  
  100.  
    101. 
  
  
  
  101.  
    102. 
  
  
  
  102.  
    103. 
  
  
  
  103.  
    104. 
  
  
  
  104.  
    105. 
  
  
  
  105.  
    106. 
  
  
  
  106.  
    107. 
  
  
  
    108. 
  
  
  
  108.  
    109. 
  
  
  
  109.  沉浸式主题
    110. 
  
  
  
  110.  
    111. 
  
  
  
  111.  
    112. 
  
  
  
    113.

设计指南

在刷新方式上，建议必配手动刷新，避免出现用户无法主动操作的情况。
自定义反馈文案（text）时，文案内容应合理友好，且不超过 18 个中文字符。以下为建议文案可供参考：


本文标题：创新互联百度小程序教程：refresh刷新
分享URL：http://cdbrznjsb.com/article/dpjjhpo.html

其他资讯

  • 网站建设专属方案

  • 网站定制化设计

  • 7X24小时服务

  • N对管家服务

让你的专属顾问为你服务