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

QQ :532337155
电话：028-86922220

  • 首页

  • 网站建设

  • 网站制作案例

  • 解决方案

  • 网站设计报价

  • 网站制作动态

  • 关于我们

  • 联系我们

 
成都网站建设设计

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

创新互联百度小程序教程：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政策文件库模板                    
      
                    分享URL：https://chengdu.cdxwcx.cn/article/dhhiocp.html

    其他资讯

    • scc是啥简称？（scc设计素材网站）

    • python中返回函数

    • 国内拨号vps购买有哪些优势

    • java保留两位小数输出怎么操作

    • 北京物理服务器和云服务器之间有啥区别？（北京物理服务器和云服务器之间有啥区别吗）

    甜橘子解决方案更多+

    • 小程序定制解决方案
    • 企业网站建设解决方案
    • 行业门户网站建设解决方案
    • 营销型网站建设解决方案
    • 外贸网站建设解决方案
    • 品牌形象网站建设解决方案
    • 数码、电子产品网站建设解决方案
    • 集团、上市企业网站建设解决方案
    • 房地产、地产项目网站建设解决方案
    • 珠宝高端奢侈品网站建设解决方案

    我们的实力更多+

    • 10年专业互联网服务经验
    • 成都高端建站设计团队
    • 资深行业分析策划
    • B2C营销型网站建设者
    • 前沿视觉设计、研发能力
    • 前端代码深度符合SEO优化
    • 成都市高新技术企业证书
    • 具有完备的项目管理
    • 完善的售后服务体系
    • 深厚的网络运营经验
    • 时刻新技术研发能力
    • 16个网站系统软件著作权

    关于甜橘子更多+

    甜橘子网站设计，为客户量身定制各类网站建设业务，包括企业型、电子商务型、行业门户型、品牌建立型等各类网站，实战经验丰富，成功案例众多。以客户利益为出发点，甜橘子网站制作为客户规划、定制符合企业需求、带有营销价值的建站方案，提供从网站前期定位分析策划到网站界面设计...
    成都网站制作案例©2020 甜橘子设计 版权所有 | 甜橘子网站设计chengdu.cdxwcx.cn 蜀ICP备11025516号
    • QQ咨询
    • 在线咨询
    • 官方微信
    • 联系电话
      座机028-86922220
      手机13518219792
    • 返回顶部