甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

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

  • 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扫码

    代码示例

    • SWAN
    • JS
    • CSS
    • JSON
     
 
 
      
  
  
  
      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：https://chengdu.cdxwcx.cn/article/dpjjhpo.html

    其他资讯