创新互联百度小程序教程：page-policy政策文件库模板
大悟县网站建设
  • 首页
  • 关于我们
  • 服务项目
    高端网站定制
    微信定制
    APP开发服务
    网络营销服务
    电商网站建设
    生物医药网站建设
    外贸网站建设
    教育培训网站建设
  • 小程序开发
  • 案例展示
    网站建设
    小程序
    电商平台
    APP
    系统平台
  • 建站知识
  • 联系我们
咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

网站建设

网站设计

网站营销

小程序

06
联系我们

公司地址

人才招聘

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

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政策文件库模板                
      
                分享路径：https://tyhkzb.com/article/dhhiocp.html

    其他资讯

    • ABAP的权限检查跟踪工具怎么使用
    • Golang中的结构体标签StructTag详解
    • vnc登录服务器输入指令没反应
    • 云服务器如何修改root密码
    • 大连空间域名：互联网品牌新选择
    分享至：
       
    关于我们
    公司简介 发展历程
    服务项目
    高端网站建设 小程序开发 APP开发 网络营销
    建站知识
    行业新闻 建站学堂 常见问题
    联系我们
    公司地址 人才招聘
    成都 大悟县
    
    电话：028-86922220
    
    地址：成都市太升南路288号锦天国际A幢1002号
    
    电话：028-86922220
    
    地址：湖省孝感市大悟县城关镇鄂北物流城13栋125号
    版权所有：大悟县疆括仕商贸有限公司 鄂ICP备2025139637号-7
    
    在线咨询
    
    服务热线
    服务热线：028-86922220
    
    TOP