189 8069 5689

创新互联百度小程序教程：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刷新
    链接分享：http://www.cdxtjz.cn/article/dpjjhpo.html

    其他资讯

    联系我们

    您好HELLO!
    感谢您来到成都网站建设公司，若您有合作意向，请您为我们留言或使用以下方式联系我们， 我们将尽快给你回复，并为您提供真诚的设计服务，谢谢。
    • 电话：028- 86922220 18980695689
    • 商务合作邮箱：631063699@qq.com
    • 合作QQ： 532337155
    • 成都网站设计地址：成都市青羊区锣锅巷31号五金站写字楼6楼

    小谭建站工作室

    成都小谭网站建设公司拥有多年以上互联网从业经验的团队，始终保持务实的风格，以"帮助客户成功"为已任，专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司；我们对营销、技术、管理都有自己独特见解，小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务！

    小谭观点

    相对传统的成都网站建设公司而言，小谭是互联网中的网站品牌策划，我们精于企业品牌与互联网相结合的整体战略服务。
    我们始终认为，网站必须注入企业基因，真正使网站成为企业vi的一部分，让整个网站品牌策划体系变的深入而持久。
    友情链接： 成都KT板广告定制   成都公司注册   德昌县网站建设   成都网络营销公司   四川宾格网公司   成都发电机维修保养公司   广告伞定制   彭州网站建设   软文发稿   网站SEO优化   
    © Copyright 2023 小谭建站工作室All Rights Reserved.  成都网站建设 / 成都网站建设 / 响应式网站建设 / 成都服务器租用