创新互联
  • 网站设计
  • 软文营销
  • 珉田数据中心
  • 成都公司注册
  • 营销型网站建设
  • 成都小程序开发
  • 外贸网站建设公司

创新互联百度小程序教程：page-policy政策文件库模板

  • page-policy 政策文件库模板
    • 示例
    • 页面内容
      • 政策文件列表页
      • 政策文件详情页
      • 我的收藏页面
      • 我的订阅页面
      • 搜索页
    • 自定义 UI 组件
    • npm 依赖
    • Bug & Tip

    page-policy 政策文件库模板

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

    解释：本模板适用于信息公开类小程序的快速搭建，可应用于办税指南、法律宝典、街道信息公告通知等场景，可将信息结构化的呈现给用户，方便用户快速阅读获取有效的信息。

    示例

    扫码体验

    代码示例

    请使用百度APP扫码

    页面内容

    模板包含政策文件列表页、政策文件详情页、收藏列表页以及订阅列表页、搜索结果页。

    政策文件列表页

    政策文件列表页包含搜索以及筛选组件，用户可以快速获取所需要的信息，同时页面包含跑马灯组件、tab 切换组件可实现信息轮播提示、板块切换等交互效果，丰富页面功能，提升使用体验。

    页面路径：pages/indexFilter/index、pages/indexTab/index

    列表页提供了筛选器和 tab 两种效果样式。其中，pages/indexFilter/index 是带筛选器的模板页，pages/indexTab/index 是带 tab 切换的模板页。如果想查看不同的模板类型，可以修改小程序根目录下的 app.json 文件，将对应类型的模板页面路径放到第一个。

    代码示例

    • 以下是使用筛选器的首页模板代码：

    • SWAN

    • JSON
    • JS
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  class='policy-home-filter'
      4. 
  
  
  
    4.  common-bg-opacity="{{true}}"
      5. 
  
  
  
    5.  common-front-color="#ffffff"
      6. 
  
  
  
    6.  fixed-title="政策文件库"
      7. 
  
  
  
    7.  need-to-return="{{false}}"
      8. 
  
  
  
    8.  fixed-text-align="center"
      9. 
  
  
  
    9.  common-text-align="left"
      10. 
  
  
  
    10.  fixed-bg-color="#ffffff"
      11. 
  
  
  
    11.  common-bg-color="#2772fb"
      12. 
  
  
  
    12.  fixed-front-color="#000000"
      13. 
  
  
  
    13.  fixed-has-border="{{true}}"
      14. 
  
  
  
    14.  common-has-border="{{false}}"
      15. 
  
  
  
    15.  show-fixed-bar="{{true}}"
      16. 
  
  
  
    16.  namespace="policy-home-filter"
      17. 
  
  
  
    17.  >
      18. 
  
  
  
    18.  
      19. 
  
  
  
    19.  
      20. 
  
  
  
    20.  
      21. 
  
  
  
    21.  
      22. 
  
  
  
    22.  
      23. 
  
  
  
    23.  政策文件库
      24. 
  
  
  
    24.  文件全文 权威解读
      25. 
  
  
  
    25.  
      26. 
  
  
  
    26.  
      27. 
  
  
  
    27.  
      28. 
  
  
  
    28.  
      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. 
  
  
  
    41.  
      42. 
  
  
  
    42.  
      43. 
  
  
  
    43.  
      44. 
  
  
  
    44.  
      45. 
  
  
  
    45.  
      46. 
  
  
  
    46.  
      47. 
  
  
  
    47.  
      48. 
  
  
  
    48.  
      49. 
  
  
  
    49.  s-for="item, findex in filter"
      50. 
  
  
  
    50.  title="{{item.title}}"
      51. 
  
  
  
    51.  class="filter"
      52. 
  
  
  
    52.  mask-with-animation="{{false}}"
      53. 
  
  
  
    53.  bind:openFilter="openFilter"
      54. 
  
  
  
    54.  max-title-width="123.79"
      55. 
  
  
  
    55.  is-immersive
      56. 
  
  
  
    56.  >
      57. 
  
  
  
    57.  
      58. 
  
  
  
    58.  s-for="sub,index in item.children"
      59. 
  
  
  
    59.  bind:change="changeFilter"
      60. 
  
  
  
    60.  value="{{findex + ':' + sub.id}}"
      61. 
  
  
  
    61.  text="{{sub.name}}" />
      62. 
  
  
  
    62.  
      63. 
  
  
  
    63.  
      64. 
  
  
  
    64.  
      65. 
  
  
  
    65.  
      66. 
  
  
  
    66.  正在加载...
      67. 
  
  
  
    67.  
      68. 
  
  
  
    68.  
      69. 
  
  
  
    69.  
      70. 
  
  
  
    70.  
      71. 
  
  
  
    71.  
      72. 
  
  
  
    72.  
      73. 
  
  
  
    73.  s-for="item, index in page"
      74. 
  
  
  
    74.  title="{{item.title}}"
      75. 
  
  
  
    75.  desc="{{'发文机关：' + item.office}}"
      76. 
  
  
  
    76.  clickable="{{true}}"
      77. 
  
  
  
    77.  data-aid="item.id"
      78. 
  
  
  
    78.  bind:tap="gotoArticle"
      79. 
  
  
  
    79.  />
      80. 
  
  
  
    80.  
      81. 
  
  
  
    81.  
      82. 
  
  
  
    82.  
      83. 
  
  
  
    83.  单行footer
      84. 
  
  
  
    84.  
      85. 
  
  
  
    85.  
      86. 
  
  
  
    86.  
      87. 
  
  
  
    87.  
      88. 
  
  
  
    88.  
      89. 
  
  
  
      90. 
 
 
 
     
 
 
      
  
  
  
    1. {
      2. 
  
  
  
    2.  "navigationBarTitleText": "政策文件库",
      3. 
  
  
  
    3.  "navigationStyle": "custom",
      4. 
  
  
  
    4.  "backgroundColor": "#ffffff",
      5. 
  
  
  
    5.  "backgroundColorTop": "#2772fb",
      6. 
  
  
  
    6.  "navigationBarBackgroundColor": "#ffffff",
      7. 
  
  
  
    7.  "navigationBarTextStyle": "white",
      8. 
  
  
  
    8.  "onReachBottomDistance": 34,
      9. 
  
  
  
    9.  "usingComponents": {
      10. 
  
  
  
    10.  "zw-custom-title-bar": "../../components/CustomTitleBar/src/index",
      11. 
  
  
  
    11.  "zw-notice-bar": "../../components/NoticeBar/src/index",
      12. 
  
  
  
    12.  "zw-footer": "../../components/Footer/src/index",
      13. 
  
  
  
    13.  "zw-icon": "../../components/Icon/src/index",
      14. 
  
  
  
    14.  "zw-loading": "../../components/LoadingStatus/src/index",
      15. 
  
  
  
    15.  "zw-state-page": "../../components/StatePage/src/index",
      16. 
  
  
  
    16.  "zw-list-item": "../../components/ListItem/src/index",
      17. 
  
  
  
    17.  "zw-spin": "../../components/Spin/src/index",
      18. 
  
  
  
    18.  "zw-filter": "../../components/Filter/src/index",
      19. 
  
  
  
    19.  "zw-filter-item": "../../components/FilterItem/src/index"
      20. 
  
  
  
    20.  }
      21. 
  
  
  
    21. }
      22. 
 
 
 
     
 
 
      
  
  
  
    1. // 获取列表数据，以下为使用 mock 数据的请求示例
      2. 
  
  
  
    2. getHomeList(query, ({code, msg, data}) => {
      3. 
  
  
  
    3.  if (code === 0) {
      4. 
  
  
  
    4.  // 设置筛选器数据
      5. 
  
  
  
    5.  !filter.length && (res.filter = data.filter);
      6. 
  
  
  
    6.  // 更新通知栏内容
      7. 
  
  
  
    7.  !notice && !this.data.hideNotice && data.notice && (res.notice = data.notice);
      8. 
  
  
  
    8.  // ...
      9. 
  
  
  
    9.  }
      10. 
  
  
  
    10.  else {
      11. 
  
  
  
    11.  // 请求异常处理
      12. 
  
  
  
    12.  }
      13. 
  
  
  
    13. }),
      14. 
  
  
  
    14. // 跳转到文章详情页。跳转携带的 id 参数只是 mock 数据举例，是否需要带参数跳转以及参数名称、参数值均可自定义
      15. 
  
  
  
    15. gotoArticle(e) {
      16. 
  
  
  
    16.  const index = e.currentTarget.dataset.aid;
      17. 
  
  
  
    17.  navigateTo({
      18. 
  
  
  
    18.  url: `../article/article?id=${index}`
      19. 
  
  
  
    19.  });
      20. 
  
  
  
    20. }
      21.

    政策文件详情页

    分为标题以及文字信息区域，可将图文等内容结构化呈现，方便用户阅读。

    页面路径：pages/article/article

    代码示例

    • SWAN
    • JSON
    • JS
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  正在加载...
      4. 
  
  
  
    4.  
      5. 
  
  
  
    5.  
      6. 
  
  
  
      7. 
  
  
  
    7.  
      8. 
  
  
  
    8.  
      9. 
  
  
  
    9.  
      10. 
  
  
  
    10.  
      11. 
  
  
  
    11.  
      12. 
  
  
  
    12.  
      13. 
  
  
  
    13.  {{detail.title}}
      14. 
  
  
  
    14.  
      15. 
  
  
  
    15.  
      16. 
  
  
  
    16.  {{detail.info[0].name}}
      17. 
  
  
  
    17.  {{detail.info[0].value}}
      18. 
  
  
  
    18.  
      19. 
  
  
  
    19.  
      20. 
  
  
  
    20.  
      21. 
  
  
  
    21.  
      22. 
  
  
  
    22.  s-if="{{expand.length > 0}}"
      23. 
  
  
  
    23.  name="arrow-{{!expandStatus ? 'down' : 'up'}}"
      24. 
  
  
  
    24.  color="#ccc"
      25. 
  
  
  
    25.  size="{{actionFontSize}}">
      26. 
  
  
  
    26.  
      27. 
  
  
  
    27.  
      28. 
  
  
  
    28.  
      29. 
  
  
  
      30. 
  
  
  
    30.  
      31. 
  
  
  
    31.  class="expand-area" s-if="{{expand.length > 0}}"
      32. 
  
  
  
    32.  style="height: {{expandStatus ? expandHeight : 0}}px;"
      33. 
  
  
  
    33.  >
      34. 
  
  
  
    34.  
      35. 
  
  
  
    35.  
      36. 
  
  
  
    36.  {{item.name}}
      37. 
  
  
  
    37.  {{item.value}}
      38. 
  
  
  
    38.  
      39. 
  
  
  
    39.  
      40. 
  
  
  
    40.  
      41. 
  
  
  
      42. 
  
  
  
    42.  
      43. 
  
  
  
      44. 
  
  
  
    44.  
      45. 
  
  
  
    45.  
      46. 
  
  
  
    46.  title="{{detail.hoster}}"
      47. 
  
  
  
    47.  desc="{{detail.desc}}"
      48. 
  
  
  
    48.  clickable="{{false}}"
      49. 
  
  
  
    49.  zw-list-item-wrap-class="custom-list"
      50. 
  
  
  
    50.  no-border
      51. 
  
  
  
    51.  >
      52. 
  
  
  
    52.  
      53. 
  
  
  
    53.  
      54. 
  
  
  
    54.  
      55. 
  
  
  
    55.  button-size="xs-small"
      56. 
  
  
  
    56.  button-color="{{detail.status ? 'secondly' : 'thirdly'}}"
      57. 
  
  
  
    57.  button-text="{{detail.status ? '已订阅' : '订阅'}}"
      58. 
  
  
  
    58.  bindtap="changeSub"
      59. 
  
  
  
    59.  />
      60. 
  
  
  
    60.  
      61. 
  
  
  
    61.  
      62. 
  
  
  
    62.  
      63. 
  
  
  
    63.  
      64. 
  
  
  
    64.  
      65. 
  
  
  
    65.  
      66. 
  
  
  
    66.  
      67. 
  
  
  
    67.  
      68. 
  
  
  
    68.  
      69. 
  
  
  
    69.  
      70. 
  
  
  
    70.  
      71. 
  
  
  
    71.  {{detail.collected ? '已收藏' : '收藏'}}
      72. 
  
  
  
    72.  
      73. 
  
  
  
    73.  
      74. 
  
  
  
    74.  
      75. 
  
  
  
    75.  
      76. 
  
  
  
    76.  
      77. 
  
  
  
    77.  分享
      78. 
  
  
  
    78.  
      79. 
  
  
  
    79.  
      80. 
  
  
  
    80.  
      81. 
  
  
  
    81.  
      82. 
  
  
  
    82.  
      83. 
  
  
  
    83.  
      84. 
  
  
  
    84.  
      85. 
  
  
  
    85.  
      86. 
  
  
  
      87. 
 
 
 
     
 
 
      
  
  
  
    1. {
      2. 
  
  
  
    2.  "navigationBarBackgroundColor": "#ffffff",
      3. 
  
  
  
    3.  "navigationBarTextStyle": "black",
      4. 
  
  
  
    4.  "navigationBarTitleText": "政策文件库",
      5. 
  
  
  
    5.  "backgroundColor": "#ffffff",
      6. 
  
  
  
    6.  "backgroundTextStyle": "light",
      7. 
  
  
  
    7.  "usingComponents": {
      8. 
  
  
  
    8.  "zw-loading": "../../components/LoadingStatus/src/index",
      9. 
  
  
  
    9.  "zw-state-page": "../../components/StatePage/src/index",
      10. 
  
  
  
    10.  "zw-button": "../../components/Button/src/index",
      11. 
  
  
  
    11.  "zw-icon": "../../components/Icon/src/index",
      12. 
  
  
  
    12.  "zw-list-item": "../../components/ListItem/src/index"
      13. 
  
  
  
    13.  }
      14. 
  
  
  
    14. }
      15. 
 
 
 
     
 
 
      
  
  
  
    1. // 请求接口，获取文件详情
      2. 
  
  
  
    2. getArticle(({code, msg, data}) => {
      3. 
  
  
  
    3.  // 请求正常响应
      4. 
  
  
  
    4.  if (code === 0) {
      5. 
  
  
  
    5.  // ...
      6. 
  
  
  
    6.  }
      7. 
  
  
  
    7.  // 请求异常
      8. 
  
  
  
    8.  else {
      9. 
  
  
  
    9.  // ...
      10. 
  
  
  
    10.  }
      11. 
  
  
  
    11. }),
      12. 
  
  
  
    12. // 切换订阅状态
      13. 
  
  
  
    13. changeSub(e) {
      14. 
  
  
  
    14.  // 获取当前订阅状态
      15. 
  
  
  
    15.  const status = this.data.detail.status;
      16. 
  
  
  
    16.  // 请求接口，切换订阅状态
      17. 
  
  
  
    17.  changeStatus(status, ({code, data}) => {
      18. 
  
  
  
    18.  // 请求正常响应
      19. 
  
  
  
    19.  if (code === 0) {
      20. 
  
  
  
    20.  // 更新订阅状态
      21. 
  
  
  
    21.  }
      22. 
  
  
  
    22.  });
      23. 
  
  
  
    23. },
      24. 
  
  
  
    24. // 切换收藏状态
      25. 
  
  
  
    25. addCollection(e) {
      26. 
  
  
  
    26.  // 获取当前收藏状态
      27. 
  
  
  
    27.  const status = this.data.detail.collected;
      28. 
  
  
  
    28.  // 请求接口，切换收藏状态
      29. 
  
  
  
    29.  changeStatus(status, ({code, data}) => {
      30. 
  
  
  
    30.  // 请求正常响应
      31. 
  
  
  
    31.  if (code === 0) {
      32. 
  
  
  
    32.  // 更新收藏状态
      33. 
  
  
  
    33.  }
      34. 
  
  
  
    34.  });
      35. 
  
  
  
    35. },
      36. 
  
  
  
    36. // 分享的标题、内容、路径、图片地址，分享成功、分享失败的回调都可以根据实际业务场景和需求自定义。
      37. 
  
  
  
    37. toShare() {
      38. 
  
  
  
    38.  swan.openShare({
      39. 
  
  
  
    39.  title: '政策文件库分享示例',
      40. 
  
  
  
    40.  content: '中共中央办公厅印发《2019-2023年全国党员教育培训工作规划》',
      41. 
  
  
  
    41.  path: '/templates/gov/policy/pages/article/article?key=' + this.data.articleId,
      42. 
  
  
  
    42.  imageUrl: 'https://ms-static.cdn.bcebos.com/miniappdocs/img/logo_new.png',
      43. 
  
  
  
    43.  success: res => {
      44. 
  
  
  
    44.  swan.showToast({
      45. 
  
  
  
    45.  title: '分享成功'
      46. 
  
  
  
    46.  });
      47. 
  
  
  
    47.  console.log('openShare success', res);
      48. 
  
  
  
    48.  },
      49. 
  
  
  
    49.  fail: err => {
      50. 
  
  
  
    50.  console.log('openShare fail', err);
      51. 
  
  
  
    51.  }
      52. 
  
  
  
    52.  });
      53. 
  
  
  
    53. }
      54.

    我的收藏页面

    用户收藏过的内容将通过一定的顺序呈现在收藏列表页，对于重点关注的内容，用户无需反复检索，在收藏列表页可直接阅读。

    页面路径：pages/collect/collect

    代码示例

    • SWAN
    • JSON
    • JS
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  tabs="{{tabs}}"
      4. 
  
  
  
    4.  type="flex"
      5. 
  
  
  
    5.  mode="auto"
      6. 
  
  
  
    6.  active-tab="{{0}}"
      7. 
  
  
  
    7.  nav-bar-width="100%"
      8. 
  
  
  
    8.  show-with-animation="{{false}}"
      9. 
  
  
  
    9.  bindonChange="onCustomTabChange"
      10. 
  
  
  
    10.  />
      11. 
  
  
  
    11.  
      12. 
  
  
  
    12.  
      13. 
  
  
  
    13.  正在加载...
      14. 
  
  
  
    14.  
      15. 
  
  
  
    15.  
      16. 
  
  
  
    16.  
      17. 
  
  
  
    17.  
      18. 
  
  
  
    18.  
      19. 
  
  
  
    19.  class="smt-feed click-zc-refresh"
      20. 
  
  
  
    20.  data-type="zc"
      21. 
  
  
  
    21.  bind:scrolltolower="autoScrollToLower"
      22. 
  
  
  
    22.  >
      23. 
  
  
  
    23.  
      24. 
  
  
  
    24.  
      25. 
  
  
  
    25.  s-for="item, index in page"
      26. 
  
  
  
    26.  title="{{item.title}}"
      27. 
  
  
  
    27.  desc="{{'发文机关：' + item.office}}"
      28. 
  
  
  
    28.  clickable="{{true}}"
      29. 
  
  
  
    29.  data-aid="item.id"
      30. 
  
  
  
    30.  bind:tap="gotoArticle"
      31. 
  
  
  
    31.  />
      32. 
  
  
  
    32.  
      33. 
  
  
  
      34. 
  
  
  
    34.  
      35. 
  
  
  
    35.  
      36. 
  
  
  
    36.  
      37. 
  
  
  
      38. 
  
  
  
    38.  
      39. 
  
  
  
    39.  
      40. 
  
  
  
    40.  
      41. 
  
  
  
    41.  正在加载...
      42. 
  
  
  
    42.  
      43. 
  
  
  
    43.  
      44. 
  
  
  
    44.  
      45. 
  
  
  
    45.  
      46. 
  
  
  
    46.  
      47. 
  
  
  
    47.  class="smt-feed click-jd-refresh"
      48. 
  
  
  
    48.  data-type="jd"
      49. 
  
  
  
    49.  bind:scrolltolower="autoScrollToLower"
      50. 
  
  
  
    50.  >
      51. 
  
  
  
    51.  
      52. 
  
  
  
    52.  
      53. 
  
  
  
    53.  s-for="item, index in page"
      54. 
  
  
  
    54.  title="{{item.title}}"
      55. 
  
  
  
    55.  desc="{{'发文机关：' + item.office}}"
      56. 
  
  
  
    56.  clickable="{{true}}"
      57. 
  
  
  
    57.  data-aid="{{item.id}}"
      58. 
  
  
  
    58.  bind:tap="gotoArticle"
      59. 
  
  
  
    59.  />
      60. 
  
  
  
    60.  
      61. 
  
  
  
    61.  
      62. 
  
  
  
    62.  
      63. 
  
  
  
    63.  
      64. 
  
  
  
    64.  
      65. 
  
  
  
      66. 
 
 
 
     
 
 
      
  
  
  
    1. {
      2. 
  
  
  
    2.  "navigationBarBackgroundColor": "#fffffe",
      3. 
  
  
  
    3.  "navigationBarTextStyle": "black",
      4. 
  
  
  
    4.  "navigationBarTitleText": "我的收藏",
      5. 
  
  
  
    5.  "backgroundColor": "#ffffff",
      6. 
  
  
  
    6.  "backgroundTextStyle": "light",
      7. 
  
  
  
    7.  "usingComponents": {
      8. 
  
  
  
    8.  "zw-loading": "../../components/LoadingStatus/src/index",
      9. 
  
  
  
    9.  "zw-state-page": "../../components/StatePage/src/index",
      10. 
  
  
  
    10.  "zw-list-item": "../../components/ListItem/src/index",
      11. 
  
  
  
    11.  "smt-feed": "@smt-ui/component/src/feed",
      12. 
  
  
  
    12.  "zw-spin": "../../components/Spin/src/index",
      13. 
  
  
  
    13.  "zw-tabs": "../../components/Tabs/src/index"
      14. 
  
  
  
    14.  }
      15. 
  
  
  
    15. }
      16. 
 
 
 
     
 
 
      
  
  
  
    1. // 请求接口，获取收藏数据
      2. 
  
  
  
    2. getCollectList(name, ({code, msg, data}) => {
      3. 
  
  
  
    3.  if (code === 0) {
      4. 
  
  
  
    4.  // 请求正常响应处理
      5. 
  
  
  
    5.  }
      6. 
  
  
  
    6.  else {
      7. 
  
  
  
    7.  // 请求异常处理
      8. 
  
  
  
    8.  }
      9. 
  
  
  
    9. }),
      10. 
  
  
  
    10. // 跳转到文章详情页。跳转携带的 id 参数只是 mock 数据举例，是否需要带参数跳转以及参数名称、参数值均可自定义
      11. 
  
  
  
    11. gotoArticle(e) {
      12. 
  
  
  
    12.  const index = e.currentTarget.dataset.aid;
      13. 
  
  
  
    13.  navigateTo({
      14. 
  
  
  
    14.  url: `../article/article?id=${index}`
      15. 
  
  
  
    15.  });
      16. 
  
  
  
    16. }
      17.

    我的订阅页面

    开发者可结合自身业务，向用户提供订阅功能。对于订阅后的内容或板块，用户无需反复检索，在订阅列表页可直接获取最新资讯。

    页面路径：pages/subscribe/subscribe

    代码示例

    • SWAN
    • JSON
    • JS
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  正在加载...
      4. 
  
  
  
    4.  
      5. 
  
  
  
    5.  
      6. 
  
  
  
    6.  s-if="errStatus !== ''"
      7. 
  
  
  
    7.  show-reload="{{stateBtn}}"
      8. 
  
  
  
    8.  type="{{errStatus}}"
      9. 
  
  
  
    9.  bind:reload="reload"
      10. 
  
  
  
    10.  />
      11. 
  
  
  
    11.  
      12. 
  
  
  
    12.  
      13. 
  
  
  
    13.  s-for="item, index in subList"
      14. 
  
  
  
    14.  title="{{item.title}}"
      15. 
  
  
  
    15.  desc="{{item.desc}}"
      16. 
  
  
  
    16.  clickable="{{false}}"
      17. 
  
  
  
    17.  data-index={{index}}
      18. 
  
  
  
    18.  bind:tap="gotoArticle"
      19. 
  
  
  
    19.  >
      20. 
  
  
  
    20.  
      21. 
  
  
  
    21.  
      22. 
  
  
  
    22.  
      23. 
  
  
  
    23.  button-size="xs-small"
      24. 
  
  
  
    24.  button-color="{{item.status ? 'secondly' : 'thirdly'}}"
      25. 
  
  
  
    25.  button-text="{{item.status ? '已订阅' : '订阅'}}"
      26. 
  
  
  
    26.  data-index="{{index}}"
      27. 
  
  
  
    27.  catchtap="changeSub"
      28. 
  
  
  
    28.  />
      29. 
  
  
  
    29.  
      30. 
  
  
  
    30.  
      31. 
  
  
  
    31.  
      32. 
  
  
  
    32.  
      33. 
  
  
  
      34. 
 
 
 
     
 
 
      
  
  
  
    1. {
      2. 
  
  
  
    2.  "navigationBarBackgroundColor": "#ffffff",
      3. 
  
  
  
    3.  "navigationBarTextStyle": "black",
      4. 
  
  
  
    4.  "navigationBarTitleText": "我的订阅",
      5. 
  
  
  
    5.  "backgroundColor": "#ffffff",
      6. 
  
  
  
    6.  "backgroundTextStyle": "light",
      7. 
  
  
  
    7.  "usingComponents": {
      8. 
  
  
  
    8.  "zw-list-item": "../../components/ListItem/src/index",
      9. 
  
  
  
    9.  "zw-loading": "../../components/LoadingStatus/src/index",
      10. 
  
  
  
    10.  "zw-state-page": "../../components/StatePage/src/index",
      11. 
  
  
  
    11.  "zw-button": "../../components/Button/src/index"
      12. 
  
  
  
    12.  }
      13. 
  
  
  
    13. }
      14. 
 
 
 
     
 
 
      
  
  
  
    1. // 请求接口，获取关注列表数据
      2. 
  
  
  
    2. getList(({code, msg, data}) => {
      3. 
  
  
  
    3.  if (code === 0) {
      4. 
  
  
  
    4.  // 请求正常响应处理
      5. 
  
  
  
    5.  }
      6. 
  
  
  
    6.  else {
      7. 
  
  
  
    7.  // 请求异常处理
      8. 
  
  
  
    8.  }
      9. 
  
  
  
    9. }),
      10. 
  
  
  
    10. // 切换订阅状态
      11. 
  
  
  
    11. changeSub(e) {
      12. 
  
  
  
    12.  // 获取当前订阅状态
      13. 
  
  
  
    13.  const status = this.data.subList[index].status;
      14. 
  
  
  
      15. 
  
  
  
    15.  changeStatus(status, ({code, data}) => {
      16. 
  
  
  
    16.  // 请求正常响应
      17. 
  
  
  
    17.  if (code === 0) {
      18. 
  
  
  
    18.  // 更新订阅状态
      19. 
  
  
  
    19.  }
      20. 
  
  
  
    20.  });
      21. 
  
  
  
    21. },
      22. 
  
  
  
    22. // 跳转到文章详情页。跳转携带的 id 参数只是 mock 数据举例，是否需要带参数跳转以及参数名称、参数值均可自定义
      23. 
  
  
  
    23. gotoArticle(e) {
      24. 
  
  
  
    24.  const index = e.currentTarget.dataset.aid;
      25. 
  
  
  
    25.  navigateTo({
      26. 
  
  
  
    26.  url: `../articleList/articleList?id=${index}`
      27. 
  
  
  
    27.  });
      28. 
  
  
  
    28. }
      29.

    搜索页

    用户触发搜索功能后将跳转至搜索页，页面包含搜索历史以及搜索结果两部分。搜索结果高亮显示，方便用户辩识获取有效信息；搜索历史结构化呈现，方便用户再次进行检索。对于搜索历史，也可使用“清空”进行删除。

    页面路径：pages/search/search

    代码示例

    • SWAN
    • JSON
    • JS
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  show-fixed-bar='{{false}}'
      4. 
  
  
  
    4.  fixed-title="搜索"
      5. 
  
  
  
    5.  fixed-front-color="#000000"
      6. 
  
  
  
    6.  common-front-color="#000000"
      7. 
  
  
  
    7.  common-bg-color='#ffffff'
      8. 
  
  
  
    8.  fixed-bg-color='#ffffff'
      9. 
  
  
  
    9.  common-bg-opacity="{{false}}"
      10. 
  
  
  
    10.  need-to-return="{{true}}"
      11. 
  
  
  
    11.  common-title="搜索"
      12. 
  
  
  
    12.  bind:navhome="navhome"
      13. 
  
  
  
    13.  />
      14. 
  
  
  
    14.  
      15. 
  
  
  
    15.  
      16. 
  
  
  
    16.  
      17. 
  
  
  
    17.  class='search-bar-component'
      18. 
  
  
  
    18.  value="{{value}}"
      19. 
  
  
  
    19.  focus="{{focusing}}"
      20. 
  
  
  
    20.  placeholder="{{placeholder}}"
      21. 
  
  
  
    21.  confirm-type="{{confirmType}}"
      22. 
  
  
  
    22.  sear            
      
                分享标题：创新互联百度小程序教程：page-policy政策文件库模板
                
      
                分享网址：http://www.shufengxianlan.com/qtweb/news25/327925.html
            
      
            
      
                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                
      
            
      
                广告
                
            
      
            
      
                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联

    猜你还喜欢下面的内容

    • phpcms无法载入样式表的解决办法
    • 专家推荐 TortoiseSVN中文使用手册新手必备
    • 做IPTV的公司是哪家？（桂哥网络香港大带宽服务器）
    • 共轭梯度法求解线性方程组，量化共轭梯度法（利用共轭梯度法求解线性方程组）
    • 主机屋免费空间是什么,主机屋免费空间的好处是什么?
    • 双线主机购买流程是什么
    • windows7禁止u盘运行?（windows7禁用u盘)
    • 日志利用Redis优化AOF日志记录技术（redis设置aof）
    • 下载Linux系统：wget命令的使用（wgetlinux）

    解决方案知识

    • HackingTeam：核心代码和数据未泄露一切尽在掌控
    • Linux下查找安装位置的技巧（linux查找安装位置）
    • 3种方法保护遗留基础设施安全
    • 的分区探索Linux下查看U盘分区的方法（linux如何显示u盘）
    • 海外美国服务器有哪几种不要钱监控工具
    • SQLServer优化50法
    • windows2003找安全组?（)
    • 提升Redis集群安全性添加密码保护（redis集群添加密码）
    • GenAI生成“2024年网络安全预测”
    • 麻烦版本开启下网站打不开没法备份数据下载数据
    • c语言入门经典这本书怎么样
    • tplink路由器没网络
    • 探究服务器虚拟化技术：性能、安全与成本比较(服务器虚拟化技术比较)
    • 美国免备案vps哪家好
    • kvmlavps

    行业网站建设

    • 展览展示
    • 茶楼设计
    • 宣传片制作
    • 垃圾桶
    • 葡萄架
    • 主动防护网
    • 塑料袋
    • 阳光房
    • 资质代办
    • 柔性防护网
    • 玻璃钢雕塑
    • 花箱
    • 酒店设计
    • 砂岩浮雕
    • 高空作业车租赁
    • 围栏护栏
    网络营销公司　　 　网站定制　　 　重庆水土双线托管　　 　成都电信光华数据中心　　 　混凝土搅拌车　　 　高端网站建设　　 　资阳做网站　　 　自动门　　 　雕琢时光　　 　成都画册快印　　 　成都光华机房　　 　手机网站制作设计　　 　简阳电信机房　　 　成都广告制作　　 　成都网站建设公司　　 　成都网页设计　　 　德阳服务器托管　　 　四川雅安服务器托管　　 　成都营销网站建设　　 　小谭网创广告　　 　
     高品质定制  跨终端自动兼容  节约开发成本  开发周期短  一体化服务

    028-86922220 13518219792

    028-86922220 13518219792

    网站建设QQ：532337155 营销推广QQ：631063699 网站制作QQ：532337155 营销推广QQ：631063699 售后QQ：1683211881
    创新互联建站专注： 网站设计 网站制作 网站建设
    地址：成都太升南路288号锦天国际A幢10楼
    创新互联

    成都创新互联科技有限公司
    Tel：400-028-6601（7x24h）