创新互联
  • 成都网站推广
  • 搜索引擎优化
  • 搜索引擎推广
  • 网络营销推广
  • 珉田数据中心
  • 高端网站设计
  • 成都企业变更注销

创新互联百度小程序教程：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.kswsj.com/qtweb/news25/327925.html
            
      
            
      
                网站建设、网络推广公司-成都快上网，一家网站设计、网站制作公司；服务项目有等
                                
      
            
      
                广告
                
            
      
            
      
                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                成都快上网

    成都快上网科技猜您喜欢

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

    做网站知识

    • 创新互联Python教程：Python的基本数据类型有哪些
    • VMware推出首款开放PaaS平台CloudFoundry
    • 改善系统性能取消Redis开机自启动（取消开机启动redis）
    • 解决Linux线程栈溢出问题（linux线程栈溢出）
    • 幼儿园健康日志怎么填？（用户登陆日志,网站登录日志2022年更新（用户登陆日志,网站登录日志2022年更新））
    • 管理Linux分支管理：掌握自由式开发流程（linux的分支）
    • 移动云服务器?（移动云服务器价格)
    • 小红伞的用处有多少？小红伞windows2008
    • Linux进程管道通信：高效实现进程间数据交换(linux进程管道通信)
    • 服务器配置参数怎么看？(服务器如何选看哪些参数配置)
    • 香港好的服务器出租
    • 万网属于什么资源？（万网虚拟云服务器）
    • word怎么缩小?（word怎么缩小行间距)
    • 扫脸付、VR付实现了，“KongFu”空付还远吗？
    • 五里店机房服务器运行状况分析与优化方案

    分类信息网站

    • 酒店设计
    • 被动防护网
    • 阳光房
    • 搅拌罐车
    • 围栏护栏
    • 火锅店设计
    • 水处理设备
    • 集装箱
    • 混凝土搅拌机
    • 石笼网
    • 玻璃钢雕塑
    • 边坡防护网
    • 小搅拌车
    • 木托盘
    • 广告制作
    • 玻璃隔断
    成都小程序　　 　广汉做网站　　 　门户网站建设方案　　 　成都网站建设　　 　广安网站建设　　 　成都LED照明　　 　乐山装修公司　　 　成都网站设计　　 　微信公众号开发　　 　H5建站　　 　电商网站建设方案　　 　新津网站运维　　 　自贡主机托管　　 　成都网站建设　　 　企业网站建设　　 　绵阳服务器托管　　 　网页设计制作　　 　买链接　　 　乐山服务器托管　　 　公路钻孔机　　 　
     品质网站建设  多平台展现  600元建站  高效快速  专业用心服务

    028-86922220 13518219792

    028-86922220 13518219792

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

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