page-search 搜索页模板

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

解释：搜索页模板。包括搜索框、搜索推荐、搜索运营、搜索结果列表等内容。

示例

扫码体验

代码示例

百度智能小程序

请使用百度APP扫码

页面内容

搜索页模板

包括导航栏、搜索框、搜索历史区域、搜索推荐区域、搜索推荐列表、搜索结果列表等内容，开发者可根据自身需要添加或删除模块。
页面路径：index/index

page-search 搜索页模板 - 图2

page-search 搜索页模板 - 图3

page-search 搜索页模板 - 图4

page-search 搜索页模板 - 图5

代码示例

  • SWAN
  • JSON
  1. <!-- index.swan -->
  2. <view class="container" bindtap="containerTap">
  3.     <topbar
  4.         title="搜索"
  5.         has-back="{{showBack}}"
  6.         backgroundColor="#fff"
  7.         bindnavigateback="navigateBack">
  8.     </topbar>
  9.     <view class="search-bar-area">
  10.         <smt-search-bar class="search-bar"
  11.             search-icon-color="#999"
  12.             placeholder="{{searchPlaceholder}}"
  13.             preset-word="{{searchPresetword}}"
  14.             value="{=searchValue=}"
  15.             focus="{=isFocus=}"
  16.             bindsearch="search"
  17.             bindclear="clear"
  18.             bindinput="input"
  19.             bindfocus="focus"
  20.             theme="white"/>
  21.     </view>
  22.     <view style="padding-bottom: {{isFocus ? keybordHeight : 0 }}px;" class="search-content-area">
  23.     <search-block
  24.         title="历史搜索"
  25.         max-height="367.75rpx"
  26.         s-if="historyItems.length > 0 && searchValue == ''">
  27.         <slot slot="actions">
  28.             <view class="history-action-group">
  29.                 <view s-if="showActions" catchtap="deleteAll" class="action-delete-all">全部删除</view>
  30.                 <view s-if="showActions" catchtap="hideActions" class="action-complate">完成</view>
  31.                 <view s-else class="action-delete" catchtap="showActions">
  32.                     <smt-icon name="trash" color="#999" size="32.61rpx"></smt-icon>
  33.                 </view>
  34.             </view>
  35.         </slot>
  36.         <slot slot="content">
  37.             <block s-for="item, index in historyItems">
  38.                 <view
  39.                     class="history-label history-label-{{item.status}}"
  40.                     hover-class="history-label-hover"
  41.                     hover-start-time="0"
  42.                     hover-stay-time="0"
  43.                     data-status="{{item.status}}"
  44.                     data-index="{{index}}"
  45.                     data-value="{{item.label}}"
  46.                     catchtap="historyLabelTap"
  47.                     bindlongpress="historyLableLongpress">{{item.label}}
  48.                     <smt-icon
  49.                         class="icon-delete"
  50.                         s-if="item.status === 1"
  51.                         name="delete"
  52.                         color="#999"
  53.                         size="21.74rpx"></smt-icon>
  54.                     </view>
  55.             </block>
  56.         </slot>
  57.     </search-block>
  58.     <search-block
  59.         title="大家都在搜"
  60.         max-height="289.86rpx"
  61.         s-if="operateItems.length > 0 && searchValue == ''">
  62.         <slot slot="content">
  63.             <block s-for="item, index in operateItems">
  64.                 <view
  65.                     class="operate-item {{index % 2 == 0 ? '' : 'operate-odd'}}" 
  66.                     hover-class="operate-item-hover"
  67.                     hover-stay-time="100"
  68.                     bindtap="operateItemTap"
  69.                     data-item="{{item}}">{{item}}</view>
  70.             </block>
  71.         </slot>
  72.     </search-block>
  73.     <view class="suggestion-area swan-security-margin-bottom" s-if="searchValue !== '' && suggestionItems.length > 0">
  74.         <block s-for="item in suggestionItems">
  75.             <view
  76.                 class="suggestion-item-container"
  77.                 hover-class="suggestion-item-hover"
  78.                 hover-stay-time="100"
  79.                 bindtap="suggestionTap"
  80.                 data-item="{{item.label}}">
  81.                 <view class="suggestion-item">
  82.                     <smt-icon name="magnifying-glass" color="#ccc" size="32.61rpx"></smt-icon>
  83.                     <view class="search-suggestion-item">
  84.                         <block s-for="text in item.textArr">
  85.                             <text selectable="false" class="{{text === searchValue ? 'text-highlight' : ''}}">{{text}}</text>
  86.                         </block>
  87.                     </view>
  88.                     <view catchtap="suggestionArrowTap" data-item="{{item.label}}">
  89.                         <smt-icon name="arrow-top-left" color="#ccc" size="32.61rpx"></smt-icon>
  90.                     </view>
  91.                 </view>
  92.             </view>
  93.         </block>
  94.     </view>
  95.     <view class="search-result-area swan-security-margin-bottom" s-if="searchValue !== '' && suggestionItems.length == 0 && searchResult.length > 0">
  96.         <block s-for="item in searchResult">
  97.             <view
  98.                 class="search-result-item-container" 
  99.                 hover-class="search-result-item-hover"
  100.                 hover-stay-time="100"
  101.                 data-item="{{item}}"
  102.                 bindtap="resultItemTap">
  103.                 <view class="search-result-item">
  104.                     <view class="search-result-name">
  105.                         <block s-for="text in item.textArr">
  106.                             <text selectable="false" class="{{text === searchValue ? 'text-highlight' : ''}}">{{text}}</text>
  107.                         </block>
  108.                     </view>
  109.                     <view class="search-result-desc">{{item.desc}}</view>
  110.                 </view>
  111.             </view>
  112.         </block>
  113.     </view>
  114.     </view>
  115.     <view class="search-status-area" s-if="isLoading || showStatus">
  116.         <smt-page-status
  117.             class="search-status"
  118.             loading="{{pageStatus.loading}}"
  119.             loading-title="{{pageStatus.loadingTitle}}"
  120.             bind:smtreloading="reloading"
  121.             title="{{pageStatus.title}}"
  122.             desc="{{pageStatus.desc}}"
  123.             icon="{{pageStatus.icon}}"
  124.             showBtn="{{pageStatus.showBtn}}"
  125.             btnText="{{pageStatus.btnText}}">
  126.         </smt-page-status>
  127.     </view>
  128. </view>
  1. {
  2.     "navigationBarTitleText": "智能小程序示例",
  3.     "navigationStyle": "custom",
  4.     "usingComponents": {
  5.         "topbar": "../components/topbar/topbar",
  6.         "search-block": "../components/search-block/search-block",
  7.         "smt-search-bar": "@smt-ui/component/src/search-bar",
  8.         "smt-icon": "@smt-ui/component/src/icon",
  9.         "smt-page-status": "@smt-ui/component/src/page-status"
  10.     }
  11. }

npm 依赖

名称版本号
@smt-ui/componentlatest

Bug & Tip

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