后浪云百度小程序教程：page-policy 政策文件库模板

后浪云

2023-2-10

小程序

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

 
 
 
  
  
  <view class="index-filter {{isIPhoneX ? 'iphone-x-compitable' : ''}} {{isOpenFilter ? 'locked' : ''}}">
  
  
   <zw-custom-title-bar
  
  
   class='policy-home-filter'
  
  
   common-bg-opacity="{{true}}"
  
  
   common-front-color="#ffffff"
  
  
   fixed-title="政策文件库"
  
  
   need-to-return="{{false}}"
  
  
   fixed-text-align="center"
  
  
   common-text-align="left"
  
  
   fixed-bg-color="#ffffff"
  
  
   common-bg-color="#2772fb"
  
  
   fixed-front-color="#000000"
  
  
   fixed-has-border="{{true}}"
  
  
   common-has-border="{{false}}"
  
  
   show-fixed-bar="{{true}}"
  
  
   namespace="policy-home-filter"
  
  
   >
  
  
   </zw-custom-title-bar>
  
  
   <view class="security-style" style="height:{{security}}"></view>
  
  
   <view class="header">
  
  
   <view class="app-handle">
  
  
   <view class="app">
  
  
   <view class="row-main app-title">政策文件库</view>
  
  
   <view class="row-sub">文件全文&nbsp;权威解读</view>
  
  
   </view>
  
  
   <view class="handle">
  
  
   <view class="handle-item">
  
  
   <view class="row-main handle-icon" bindtap="gotoSubscribe">
  
  
   <zw-icon name="subscribe" size="{{iconsize}}" color="#fff" class="icon-1"/>
  
  
   </view>
  
  
   <view class="row-sub">我的订阅</view>
  
  
   </view>
  
  
   <view class="handle-item">
  
  
   <view class="row-main handle-icon" bindtap="gotoCollect">
  
  
   <zw-icon name="no-collect" size="{{iconsize}}" color="#fff" class="icon-2"/>
  
  
   </view>
  
  
   <view class="row-sub">我的收藏</view>
  
  
   </view>
  
  
   </view>
  
  
   </view>
  
  
   <view class="search" bindtap="gotoSearch"></view>
  
  
   </view>
  
  
   <view class="notice-wrap" s-if="notice.text">
  
  
   <zw-notice-bar text="{{notice.text}}" bind:close="noticeClose" bind:clicknotice="clicknotice"/>
  
  
   </view>
  
  
   <view class="content">
  
  
   <view class="filter-section" s-if="{{filter.length}}">
  
  
   <zw-filter
  
  
   s-for="item, findex in filter"
  
  
   title="{{item.title}}"
  
  
   class="filter"
  
  
   mask-with-animation="{{false}}"
  
  
   bind:openFilter="openFilter"
  
  
   max-title-width="123.79"
  
  
   is-immersive
  
  
   >
  
  
   <zw-filter-item
  
  
   s-for="sub,index in item.children"
  
  
   bind:change="changeFilter"
  
  
   value="{{findex + ':' + sub.id}}"
  
  
   text="{{sub.name}}" />
  
  
   </zw-filter>
  
  
   </view>
  
  
   <view class="filter-content {{notice ? 'smaller' : 'normal'}}">
  
  
   <zw-loading s-if="showLoading" zw-loading-status-class="custom-loading">
  
  
   <view slot="text">正在加载...</view>
  
  
   </zw-loading>
  
  
   <zw-state-page show-reload="{{stateBtn}}" type="{{errStatus}}" bind:reload="reload" zw-state-page-class="custom-state" fixed="{{false}}" s-if="{{errStatus !== ''}}"/>
  
  
   <block s-if="isLoaded">
  
  
   <view class="feed-content">
  
  
   <block s-for="page in list">
  
  
   <zw-list-item
  
  
   s-for="item, index in page"
  
  
   title="{{item.title}}"
  
  
   desc="{{'发文机关：' + item.office}}"
  
  
   clickable="{{true}}"
  
  
   data-aid="item.id"
  
  
   bind:tap="gotoArticle"
  
  
   />
  
  
   </block>
  
  
   <zw-spin status="{{status}}" bind:tap="reloadFeed" s-if="showStatus" zw-spin-class="custom-spin"></zw-spin>
  
  
   <zw-footer s-if="feedEnd" zw-footer-class="custom-footer">
  
  
   <view class="footer-txt">单行footer</view>
  
  
   </zw-footer>
  
  
   </view>
  
  
   </block>
  
  
   </view>
  
  
   </view>
  
  
  </view>

 
 
 
  
  
  {
  
  
   "navigationBarTitleText": "政策文件库",
  
  
   "navigationStyle": "custom",
  
  
   "backgroundColor": "#ffffff",
  
  
   "backgroundColorTop": "#2772fb",
  
  
   "navigationBarBackgroundColor": "#ffffff",
  
  
   "navigationBarTextStyle": "white",
  
  
   "onReachBottomDistance": 34,
  
  
   "usingComponents": {
  
  
   "zw-custom-title-bar": "../../components/CustomTitleBar/src/index",
  
  
   "zw-notice-bar": "../../components/NoticeBar/src/index",
  
  
   "zw-footer": "../../components/Footer/src/index",
  
  
   "zw-icon": "../../components/Icon/src/index",
  
  
   "zw-loading": "../../components/LoadingStatus/src/index",
  
  
   "zw-state-page": "../../components/StatePage/src/index",
  
  
   "zw-list-item": "../../components/ListItem/src/index",
  
  
   "zw-spin": "../../components/Spin/src/index",
  
  
   "zw-filter": "../../components/Filter/src/index",
  
  
   "zw-filter-item": "../../components/FilterItem/src/index"
  
  
   }
  
  
  }

 
 
 
  
  
  // 获取列表数据，以下为使用 mock 数据的请求示例
  
  
  getHomeList(query, ({code, msg, data}) => {
  
  
   if (code === 0) {
  
  
   // 设置筛选器数据
  
  
   !filter.length && (res.filter = data.filter);
  
  
   // 更新通知栏内容
  
  
   !notice && !this.data.hideNotice && data.notice && (res.notice = data.notice);
  
  
   // ...
  
  
   }
  
  
   else {
  
  
   // 请求异常处理
  
  
   }
  
  
  }),
  
  
  // 跳转到文章详情页。跳转携带的 id 参数只是 mock 数据举例，是否需要带参数跳转以及参数名称、参数值均可自定义
  
  
  gotoArticle(e) {
  
  
   const index = e.currentTarget.dataset.aid;
  
  
   navigateTo({
  
  
   url: `../article/article?id=${index}`
  
  
   });
  
  
  }

政策文件详情页

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

页面路径：pages/article/article

代码示例

SWAN
JSON
JS

 
 
 
  
  
  <view class="article-wrapper">
  
  
   <zw-loading s-if="showLoading">
  
  
   <view slot="text">正在加载...</view>
  
  
   </zw-loading>
  
  
   <zw-state-page show-reload="{{stateBtn}}" type="{{errStatus}}" s-if="errStatus !== ''" bind:reload="reload"/>
  
  
  
  
  
   <block s-if="isLoaded">
  
  
   <view class="{{isIPhoneX ? 'iphone-x-compitable' : '' }}">
  
  
   <view class="main-container">
  
  
   <view class="main-content">
  
  
   <view class="content">
  
  
   <view class="article-desc" bindtap="changeExpand">
  
  
   <view class="article-title">{{detail.title}}</view>
  
  
   <view class="article-info {{expand.length ? 'nomargin' : ''}}" >
  
  
   <view class="info-item">
  
  
   <view class="info-name">{{detail.info[0].name}}</view>
  
  
   <view class="info-value">{{detail.info[0].value}}</view>
  
  
   </view>
  
  
   </view>
  
  
   <view class="expand-icon">
  
  
   <zw-icon
  
  
   s-if="{{expand.length > 0}}"
  
  
   name="arrow-{{!expandStatus ? 'down' : 'up'}}"
  
  
   color="#ccc"
  
  
   size="{{actionFontSize}}">
  
  
   </zw-icon>
  
  
   </view>
  
  
   </view>
  
  
  
  
  
   <view
  
  
   class="expand-area" s-if="{{expand.length > 0}}"
  
  
   style="height: {{expandStatus ? expandHeight : 0}}px;"
  
  
   >
  
  
   <view class="expand-area-inner">
  
  
   <view class="info-item" s-for="item in expand">
  
  
   <view class="info-name">{{item.name}}</view>
  
  
   <view class="info-value">{{item.value}}</view>
  
  
   </view>
  
  
   </view>
  
  
   </view>
  
  
  
  
  
   <rich-text nodes="{{detail.content}}" selectable="true"></rich-text>
  
  
  
  
  
   <view class="subscribe border border-top">
  
  
   <zw-list-item
  
  
   title="{{detail.hoster}}"
  
  
   desc="{{detail.desc}}"
  
  
   clickable="{{false}}"
  
  
   zw-list-item-wrap-class="custom-list"
  
  
   no-border
  
  
   >
  
  
   <slot>
  
  
   <view class="btn-wrap" >
  
  
   <zw-button
  
  
   button-size="xs-small"
  
  
   button-color="{{detail.status ? 'secondly' : 'thirdly'}}"
  
  
   button-text="{{detail.status ? '已订阅' : '订阅'}}"
  
  
   bindtap="changeSub"
  
  
   />
  
  
   </view>
  
  
   </slot>
  
  
   </zw-list-item>
  
  
   </view>
  
  
   </view>
  
  
   <view class="footer {{isIPhoneX ? 'iphone-x-compitable' : '' }} border border-top {{!isIos ? 'android-patch': ''}}">
  
  
   <view class="footer-inner">
  
  
   <view class="actions-list" >
  
  
   <view class="action" bind:tap="addCollection">
  
  
   <zw-icon class="icon" name="{{detail.collected ? 'collect-color' : 'collect-thin'}}" size="{{iconSize}}">
  
  
   </zw-icon>
  
  
   {{detail.collected ? '已收藏' : '收藏'}}
  
  
   </view>
  
  
   </view>
  
  
   <view class="actions-list" >
  
  
   <view class="action" bind:tap="toShare">
  
  
   <zw-icon class="icon" name="share" size="{{iconSize}}"></zw-icon>
  
  
   分享
  
  
   </view>
  
  
   </view>
  
  
   </view>
  
  
   </view>
  
  
   </view>
  
  
   </view>
  
  
   </view>
  
  
   </block>
  
  
  </view>

 
 
 
  
  
  {
  
  
   "navigationBarBackgroundColor": "#ffffff",
  
  
   "navigationBarTextStyle": "black",
  
  
   "navigationBarTitleText": "政策文件库",
  
  
   "backgroundColor": "#ffffff",
  
  
   "backgroundTextStyle": "light",
  
  
   "usingComponents": {
  
  
   "zw-loading": "../../components/LoadingStatus/src/index",
  
  
   "zw-state-page": "../../components/StatePage/src/index",
  
  
   "zw-button": "../../components/Button/src/index",
  
  
   "zw-icon": "../../components/Icon/src/index",
  
  
   "zw-list-item": "../../components/ListItem/src/index"
  
  
   }
  
  
  }

 
 
 
  
  
  // 请求接口，获取文件详情
  
  
  getArticle(({code, msg, data}) => {
  
  
   // 请求正常响应
  
  
   if (code === 0) {
  
  
   // ...
  
  
   }
  
  
   // 请求异常
  
  
   else {
  
  
   // ...
  
  
   }
  
  
  }),
  
  
  // 切换订阅状态
  
  
  changeSub(e) {
  
  
   // 获取当前订阅状态
  
  
   const status = this.data.detail.status;
  
  
   // 请求接口，切换订阅状态
  
  
   changeStatus(status, ({code, data}) => {
  
  
   // 请求正常响应
  
  
   if (code === 0) {
  
  
   // 更新订阅状态
  
  
   }
  
  
   });
  
  
  },
  
  
  // 切换收藏状态
  
  
  addCollection(e) {
  
  
   // 获取当前收藏状态
  
  
   const status = this.data.detail.collected;
  
  
   // 请求接口，切换收藏状态
  
  
   changeStatus(status, ({code, data}) => {
  
  
   // 请求正常响应
  
  
   if (code === 0) {
  
  
   // 更新收藏状态
  
  
   }
  
  
   });
  
  
  },
  
  
  // 分享的标题、内容、路径、图片地址，分享成功、分享失败的回调都可以根据实际业务场景和需求自定义。
  
  
  toShare() {
  
  
   swan.openShare({
  
  
   title: '政策文件库分享示例',
  
  
   content: '中共中央办公厅印发《2019-2023年全国党员教育培训工作规划》',
  
  
   path: '/templates/gov/policy/pages/article/article?key=' + this.data.articleId,
  
  
   imageUrl: 'https://ms-static.cdn.bcebos.com/miniappdocs/img/logo_new.png',
  
  
   success: res => {
  
  
   swan.showToast({
  
  
   title: '分享成功'
  
  
   });
  
  
   console.log('openShare success', res);
  
  
   },
  
  
   fail: err => {
  
  
   console.log('openShare fail', err);
  
  
   }
  
  
   });
  
  
  }

我的收藏页面

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

页面路径：pages/collect/collect

代码示例

SWAN
JSON
JS

 
 
 
  
  
  <view class="collect-wrapper">
  
  
   <zw-tabs
  
  
   tabs="{{tabs}}"
  
  
   type="flex"
  
  
   mode="auto"
  
  
   active-tab="{{0}}"
  
  
   nav-bar-width="100%"
  
  
   show-with-animation="{{false}}"
  
  
   bindonChange="onCustomTabChange"
  
  
   />
  
  
   <view class="tab-content {{activeName === 'zc' ? 'show' : 'hide'}} {{isIPhoneX ? 'iphone-x-compitable' : ''}}">
  
  
   <zw-loading s-if="zc.showLoading">
  
  
   <view slot="text">正在加载...</view>
  
  
   </zw-loading>
  
  
   <zw-state-page show-reload="{{zc.stateBtn}}" type="{{zc.errStatus}}" s-if="zc.errStatus !== ''" bind:reload="reloadZc" zw-state-page-class="custom-state" fixed="{{false}}"/>
  
  
   <block s-if="zc.isLoaded">
  
  
   <!-- 上拉加载 -->
  
  
   <smt-feed
  
  
   class="smt-feed click-zc-refresh"
  
  
   data-type="zc"
  
  
   bind:scrolltolower="autoScrollToLower"
  
  
   >
  
  
   <block s-for="page in zc.list">
  
  
   <zw-list-item
  
  
   s-for="item, index in page"
  
  
   title="{{item.title}}"
  
  
   desc="{{'发文机关：' + item.office}}"
  
  
   clickable="{{true}}"
  
  
   data-aid="item.id"
  
  
   bind:tap="gotoArticle"
  
  
   />
  
  
   </block>
  
  
  
  
  
   <zw-spin status="{{zc.status}}" bind:tap="reloadZcFeed" zw-spin-class="custom-spin"></zw-spin>
  
  
   </smt-feed>
  
  
   </block>
  
  
  
  
  
   </view>
  
  
   <view class="tab-content {{activeName === 'jd' ? 'show' : 'hide'}} {{isIPhoneX ? 'iphone-x-compitable' : ''}}">
  
  
   <zw-loading s-if="jd.showLoading">
  
  
   <view slot="text">正在加载...</view>
  
  
   </zw-loading>
  
  
   <zw-state-page show-reload="{{jd.stateBtn}}" type="{{jd.errStatus}}" s-if="jd.errStatus !== ''" bind:reload="reloadJd" zw-state-page-class="custom-state" fixed="{{false}}"/>
  
  
   <block s-if="jd.isLoaded">
  
  
   <!-- 上拉加载 -->
  
  
   <zw-feed
  
  
   class="smt-feed click-jd-refresh"
  
  
   data-type="jd"
  
  
   bind:scrolltolower="autoScrollToLower"
  
  
   >
  
  
   <block s-for="page in jd.list">
  
  
   <zw-list-item
  
  
   s-for="item, index in page"
  
  
   title="{{item.title}}"
  
  
   desc="{{'发文机关：' + item.office}}"
  
  
   clickable="{{true}}"
  
  
   data-aid="{{item.id}}"
  
  
   bind:tap="gotoArticle"
  
  
   />
  
  
   </block>
  
  
   <zw-spin status="{{jd.status}}" bind:tap="reloadJdFeed" zw-spin-class="custom-spin"></zw-spin>
  
  
   </zw-feed>
  
  
   </block>
  
  
   </view>
  
  
  </view>

 
 
 
  
  
  {
  
  
   "navigationBarBackgroundColor": "#fffffe",
  
  
   "navigationBarTextStyle": "black",
  
  
   "navigationBarTitleText": "我的收藏",
  
  
   "backgroundColor": "#ffffff",
  
  
   "backgroundTextStyle": "light",
  
  
   "usingComponents": {
  
  
   "zw-loading": "../../components/LoadingStatus/src/index",
  
  
   "zw-state-page": "../../components/StatePage/src/index",
  
  
   "zw-list-item": "../../components/ListItem/src/index",
  
  
   "smt-feed": "@smt-ui/component/src/feed",
  
  
   "zw-spin": "../../components/Spin/src/index",
  
  
   "zw-tabs": "../../components/Tabs/src/index"
  
  
   }
  
  
  }

 
 
 
  
  
  // 请求接口，获取收藏数据
  
  
  getCollectList(name, ({code, msg, data}) => {
  
  
   if (code === 0) {
  
  
   // 请求正常响应处理
  
  
   }
  
  
   else {
  
  
   // 请求异常处理
  
  
   }
  
  
  }),
  
  
  // 跳转到文章详情页。跳转携带的 id 参数只是 mock 数据举例，是否需要带参数跳转以及参数名称、参数值均可自定义
  
  
  gotoArticle(e) {
  
  
   const index = e.currentTarget.dataset.aid;
  
  
   navigateTo({
  
  
   url: `../article/article?id=${index}`
  
  
   });
  
  
  }

我的订阅页面

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

页面路径：pages/subscribe/subscribe

代码示例

SWAN
JSON
JS

 
 
 
  
  
  <view class="subscribe-wrap swan-security-padding-bottom">
  
  
   <zw-loading s-if="showLoading">
  
  
   <view slot="text">正在加载...</view>
  
  
   </zw-loading>
  
  
   <zw-state-page
  
  
   s-if="errStatus !== ''"
  
  
   show-reload="{{stateBtn}}"
  
  
   type="{{errStatus}}"
  
  
   bind:reload="reload"
  
  
   />
  
  
   <view s-if="isLoaded">
  
  
   <zw-list-item
  
  
   s-for="item, index in subList"
  
  
   title="{{item.title}}"
  
  
   desc="{{item.desc}}"
  
  
   clickable="{{false}}"
  
  
   data-index={{index}}
  
  
   bind:tap="gotoArticle"
  
  
   >
  
  
   <slot>
  
  
   <view class="btn-wrap" >
  
  
   <zw-button
  
  
   button-size="xs-small"
  
  
   button-color="{{item.status ? 'secondly' : 'thirdly'}}"
  
  
   button-text="{{item.status ? '已订阅' : '订阅'}}"
  
  
   data-index="{{index}}"
  
  
   catchtap="changeSub"
  
  
   />
  
  
   </view>
  
  
   </slot>
  
  
   </zw-list-item>
  
  
   </view>
  
  
  </view>

 
 
 
  
  
  {
  
  
   "navigationBarBackgroundColor": "#ffffff",
  
  
   "navigationBarTextStyle": "black",
  
  
   "navigationBarTitleText": "我的订阅",
  
  
   "backgroundColor": "#ffffff",
  
  
   "backgroundTextStyle": "light",
  
  
   "usingComponents": {
  
  
   "zw-list-item": "../../components/ListItem/src/index",
  
  
   "zw-loading": "../../components/LoadingStatus/src/index",
  
  
   "zw-state-page": "../../components/StatePage/src/index",
  
  
   "zw-button": "../../components/Button/src/index"
  
  
   }
  
  
  }

 
 
 
  
  
  // 请求接口，获取关注列表数据
  
  
  getList(({code, msg, data}) => {
  
  
   if (code === 0) {
  
  
   // 请求正常响应处理
  
  
   }
  
  
   else {
  
  
   // 请求异常处理
  
  
   }
  
  
  }),
  
  
  // 切换订阅状态
  
  
  changeSub(e) {
  
  
   // 获取当前订阅状态
  
  
   const status = this.data.subList[index].status;
  
  
  
  
  
   changeStatus(status, ({code, data}) => {
  
  
   // 请求正常响应
  
  
   if (code === 0) {
  
  
   // 更新订阅状态
  
  
   }
  
  
   });
  
  
  },
  
  
  // 跳转到文章详情页。跳转携带的 id 参数只是 mock 数据举例，是否需要带参数跳转以及参数名称、参数值均可自定义
  
  
  gotoArticle(e) {
  
  
   const index = e.currentTarget.dataset.aid;
  
  
   navigateTo({
  
  
   url: `../articleList/articleList?id=${index}`
  
  
   });
  
  
  }

搜索页

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

页面路径：pages/search/search

代码示例

SWAN
JSON
JS

 
 
 
  
  
  <view class="search-wrapper">
  
  
   <zw-custom-title-bar
  
  
   show-fixed-bar='{{false}}'
  
  
   fixed-title="搜索"
  
  
   fixed-front-color="#000000"
  
  
   common-front-color="#000000"
  
  
   common-bg-color='#ffffff'
  
  
   fixed-bg-color='#ffffff'
  
  
   common-bg-opacity="{{false}}"
  
  
   need-to-return="{{true}}"
  
  
   common-title="搜索"
  
  
   bind:navhome="navhome"
  
  
   />
  
  
   <view class="search-component clear">
  
  
   <view class="search-bar border border-bottom {{!isIos ? 'android-patch': ''}}">
  
  
   <zw-search-bar
  
  
   class='search-bar-component'
  
  
   value="{{value}}"
  
  
   focus="{{focusing}}"
  
  
   placeholder="{{placeholder}}"
  
  
   confirm-type="{{confirmType}}"
  
  
   search-text-color="{{searchTextColor}}"
  
  
   bindfocus="focusHdl"
  
  
   bindblur="blurHdl"
  
  
   bindinput="iptHdl"
  
  
   bindconfirm="searchBtnHdl"
  
  
   bindclear="emptyHdl"
  
  
   bindsearch="searchBtnHdl"
  
  
   />
  
  
   </view>
  
  
   <!-- 状态 -->
  
  
   <view class="status-content" s-if="showLoading || errStatus !== ''">
  
  
   <zw-loading s-if="showLoading" zw-loading-status-class="custom-loading">
  
  
   <view slot="text">正在加载...</view>
  
  
   </zw-loading>
  
  
   <zw-state-page
  
  
   s-if="errStatus !== ''"
  
  
   fixed="{{false}}"
  
  
   show-reload="{{errStatus === 'noNetwork' || errStatus === 'warning'}}"
  
  
   type="{{errStatus}}"
  
  
   bind:reload="reload" class-name="custom-state"/>
  
  
   </view>
  
  
   <view
  
  
   class="search-body"
  
  
   s-if="!showLoading"
  
  
   >
  
  
   <!-- 历史搜索+热门搜索 -->
  
  
   <view
  
  
   class="history-info"
  
  
   s-if="!value && !resultState"
  
  
   >
  
  
   <block s-if="searchInfo.info.length > 0">
  
  
   <view class="history-title">
  
  
   <text>{{searchInfo.title}}</text>
  
  
   <zw-icon
  
  
   s-if="searchInfo.delete"
  
  
   name="trash"
  
  
   size="{{iconsize}}"
  
  
   bindtap="deleteHis"
  
  
   color="#999"
  
  
   />
  
  
   </view>
  
  
   <view class="history-body {{searchInfo.delete ? 'history-body-shrink' : ''}}"
  
  
   >
  
  
   <view
  
  
   class="history-item"
  
  
   s-for="info in searchInfo.info"
  
  
   hover-class="list-hover-feedback"
  
  
   hover-stay-time="{{240}}"
  
  
   bindtap="itemSelect"
  
  
   data-item="{{info}}"
  
  
   data-type="{{item.type}}"
  
  
   >
  
  
   <text>
  
  
   {{info}}
  
  
   </text>
  
  
   </view>
  
  
   </view>
  
  
   </block>
  
  
   </view>
  
  
   <!-- 搜索结果 -->
  
  
   <view
  
  
   class="result"
  
  
   s-if="resultState"
  
  
   >
  
  
   <view s-for="item, index in list">
  
  
   <zw-list-item
  
  
   title="{{item.title}}"
  
  
   desc="{{'发文机关：' + item.office}}"
  
  
   clickable="{{true}}"
  
  
   data-aid="item.id"
  
  
   bind:tap="gotoArticle"
  
  
   >
  
  
   <view slot="title">
  
  
   <rich-text nodes="{{item.title}}" selectable="true" />
  
  
   </view>
  
  
   </zw-list-item>
  
  
   </view>
  
  
   </view>
  
  
   </view>
  
  
   </view>
  
  
  </view>

 
 
 
  
  
  {
  
  
   "navigationBarTitleText": "搜索",
  
  
   "navigationBarBackgroundColor": "#ffffff",
  
  
   "navigationBarTextStyle": "black",
  
  
   "navigationStyle": "custom",
  
  
   "enablePullDownRefresh": false,
  
  
   "usingComponents": {
  
  
   "zw-search-bar": "../../components/SearchBar/src/index",
  
  
   "zw-state-page": "../../components/StatePage/src/index",
  
  
   "zw-icon": "../../components/Icon/src/index",
  
  
   "zw-loading": "../../components/LoadingStatus/src/index",
  
  
   "zw-custom-title-bar": "../../components/CustomTitleBar/src/index",
  
  
   "zw-list-item": "../../components/ListItem/src/index"
  
  
   }
  
  
  }

 
 
 
  
  
  onLoad() {
  
  
   // 从缓存中获取历史记录
  
  
   let searchInfo = {};
  
  
   swan.getStorage({
  
  
   key: this.data.historyStorageName,
  
  
   success: res => {
  
  
   const localHistory = res.data;
  
  
   if (localHistory) {
  
  
   // 处理缓存的历史数据
  
  
   }
  
  
   },
  
  
   fail: () => {
  
  
   // 获取缓存异常处理
  
  
   }
  
  
   });
  
  
  },
  
  
  // 将历史搜索存入 Storage，缓存搜索历史
  
  
  saveHistory(text) {
  
  
   // 设置搜索历史缓存
  
  
   swan.setStorage({
  
  
   key: this.data.historyStorageName,
  
  
   exp: 60 * 24 * 60 * 60 * 1000,
  
  
   data: history
  
  
   });
  
  
  },
  
  
  // 删除历史记录，可直接通过清除缓存数据来删除搜索历史
  
  
  deleteHis() {
  
  
   // 弹窗二次确认
  
  
   swan.showModal({
  
  
   title: '清空搜索历史',
  
  
   content: '数据清空后,相关内容无法恢复',
  
  
   confirmText: '确认清空',
  
  
   cancelText: '取消',
  
  
   success: res => {
  
  
   // 确认清空
  
  
   if (res.confirm) {
  
  
   this.setData({
  
  
   'searchInfo.info': []
  
  
   });
  
  
   // 移除缓存数据
  
  
   swan.removeStorageSync(this.data.historyStorageName);
  
  
   }
  
  
   }
  
  
   });
  
  
  },
  
  
  // 格式化搜索结果数据。搜索词高亮处理，高亮处理也可以直接放在接口处理，接口返回带样式的内容放在富文本展示。示例中的高亮词是mock数据。
  
  
  fomateValue(value) {
  
  
   const arr = value.split('<em');
  
  
   return arr.map(item => {
  
  
   if (item.indexOf('>') > -1) {
  
  
   const result = item.slice(item.indexOf('>') + 1);
  
  
   return result.split('</em>').join('');
  
  
   }
  
  
   return item;
  
  
   }).join('');
  
  
  },
  
  
  // 请求接口，获取搜索结果
  
  
  getResult(query, isSaveHis = false) {
  
  
   // 是否要保存历史记录
  
  
   isSaveHis && this.saveHistory(query);
  
  
   getSearchList(this.data.activeName, ({code, msg, data}) => {
  
  
   if (code === 0) {
  
  
   // 接口正常响应处理
  
  
   }
  
  
   else {
  
  
   // 接口异常处理
  
  
   }
  
  
   });
  
  
  },
  
  
  // 回到小程序的首页，url 路径可根据实际路径替换
  
  
  navhome() {
  
  
   navigateTo({
  
  
   url: '../indexTab/index'
  
  
   });
  
  
  },
  
  
  // 跳转到文章详情页。跳转携带的 id 参数只是 mock 数据举例，是否需要带参数跳转以及参数名称、参数值均可自定义
  
  
  gotoArticle(e) {
  
  
   const index = e.currentTarget.dataset.aid;
  
  
   navigateTo({
  
  
   url: `../article/article?id=${index}`
  
  
   });
  
  
  }

自定义 UI 组件

在政策文件库中，用到了如下自定义 UI 组件：

组件名称	路径	说明
Button 按钮组件	components/Button	按钮组件支持设置尺寸、文案、文字颜色、背景颜色、禁用置灰等
CustomTitleBar 沉浸式导航栏组件	components/CustomTitleBar	沉浸式导航栏组件可实现导航栏通栏配置，上滑、下拉导航栏渐变切换效果
Filter、FilterItem 筛选器组件	components/Filter、components/FilterItem	筛选器组件可以满足多条件筛选场景，支持多列筛选。Filter 组件需要配合 FilterItem 组件使用
Footer 页脚组件	components/Footer	页脚组件可自定义页脚内容
Icon 组件	components/Icon	图标组件，可设置不同图标类型、图标大小和颜色
ListItem 列表项组件	components/ListItems	列表项组件
LoadingStatus 加载态组件	components/LoadingStatus	可设置加载态的主题色、文案颜色
NoticeBar 跑马灯组件	components/NoticeBar	跑马灯组件可以自动广播提示消息
SearchBar 搜索框组件	components/SearchBar	搜索框组件支持保存搜索历史、删除搜索历史、清空搜索内容、搜索结果词高亮显示等功能
Spin 加载组件	components/Spin	加载组件用于展示上拉加载状态，显示加载态内容，包括点击加载、正在加载、加载完成、重新加载四种状态
StatePage 状态页组件	components/StatePage	状态页组件用于设置页面的不同展现状态，如无网络、无数据，还可配合描述文案、重新加载按钮一起使用
Tabs 组件	components/Tabs	Tabs 组件可以满足在不同视图内容中进行切换

npm 依赖

名称	版本号
@smt-ui/component	latest

Bug & Tip

Tip：该模板使用了 ES6 语法，需要开启开发者工具的增强编译，操作步骤参看开启说明；同时也需开启上传代码时样式自动补全。
Tip：以上代码示例为纯客户端代码，可直接在模拟器和真机预览。
Tip：模板中使用的是测试数据，你需要从接口中获取真实的数据。

作者：后浪云

链接：https://idc.net/help/185951/

文章版权归作者所有，未经允许请勿转载。

THE END

香港云服务器
1核2G内存30G硬盘

年付5.5折 200元

为什么选择后浪云？

后浪云百度小程序教程：page-policy 政策文件库模板

page-policy 政策文件库模板

示例

页面内容

政策文件列表页

政策文件详情页

我的收藏页面

我的订阅页面

搜索页

自定义 UI 组件

npm 依赖

Bug & Tip

香港云服务器 1核2G内存30G硬盘

年付5.5折 200元

为什么选择后浪云？

后浪云百度小程序教程：page-policy 政策文件库模板

page-policy 政策文件库模板

示例

页面内容

政策文件列表页

政策文件详情页

我的收藏页面

我的订阅页面

搜索页

自定义 UI 组件

npm 依赖

Bug & Tip

香港云服务器
1核2G内存30G硬盘