• page-search 搜索页模板
  • 示例
  • 页面内容
    • 搜索页模板
  • npm 依赖
  • Bug & Tip

page-search 搜索页模板

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

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

示例

扫码体验

代码示例

请使用百度APP扫码

页面内容

搜索页模板

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

代码示例

• SWAN
• JSON

 


  
<!-- index.swan -->

  
<view class="container" bindtap="containerTap">

  
 <topbar

  
 title="搜索"

  
 has-back="{{showBack}}"

  
 backgroundColor="#fff"

  
 bindnavigateback="navigateBack">

  
 </topbar>

  
 <view class="search-bar-area">

  
 <smt-search-bar class="search-bar"

  
 search-icon-color="#999"

  
 placeholder="{{searchPlaceholder}}"

  
 preset-word="{{searchPresetword}}"

  
 value="{=searchValue=}"

  
 focus="{=isFocus=}"

  
 bindsearch="search"

  
 bindclear="clear"

  
 bindinput="input"

  
 bindfocus="focus"

  
 theme="white"/>

  
 </view>

  
 <view style="padding-bottom: {{isFocus ? keybordHeight : 0 }}px;" class="search-content-area">

  
 <search-block

  
 title="历史搜索"

  
 max-height="367.75rpx"

  
 s-if="historyItems.length > 0 && searchValue == ''">

  
 <slot slot="actions">

  
 <view class="history-action-group">

  
 <view s-if="showActions" catchtap="deleteAll" class="action-delete-all">全部删除</view>

  
 <view s-if="showActions" catchtap="hideActions" class="action-complate">完成</view>

  
 <view s-else class="action-delete" catchtap="showActions">

  
 <smt-icon name="trash" color="#999" size="32.61rpx"></smt-icon>

  
 </view>

  
 </view>

  
 </slot>

  
 <slot slot="content">

  
 <block s-for="item, index in historyItems">

  
 <view

  
 class="history-label history-label-{{item.status}}"

  
 hover-class="history-label-hover"

  
 hover-start-time="0"

  
 hover-stay-time="0"

  
 data-status="{{item.status}}"

  
 data-index="{{index}}"

  
 data-value="{{item.label}}"

  
 catchtap="historyLabelTap"

  
 bindlongpress="historyLableLongpress">{{item.label}}

  
 <smt-icon

  
 class="icon-delete"

  
 s-if="item.status === 1"

  
 name="delete"

  
 color="#999"

  
 size="21.74rpx"></smt-icon>

  
 </view>

  
 </block>

  
 </slot>

  
 </search-block>

  
 <search-block

  
 title="大家都在搜"

  
 max-height="289.86rpx"

  
 s-if="operateItems.length > 0 && searchValue == ''">

  
 <slot slot="content">

  
 <block s-for="item, index in operateItems">

  
 <view

  
 class="operate-item {{index % 2 == 0 ? '' : 'operate-odd'}}" 

  
 hover-class="operate-item-hover"

  
 hover-stay-time="100"

  
 bindtap="operateItemTap"

  
 data-item="{{item}}">{{item}}</view>

  
 </block>

  
 </slot>

  
 </search-block>

  
 <view class="suggestion-area swan-security-margin-bottom" s-if="searchValue !== '' && suggestionItems.length > 0">

  
 <block s-for="item in suggestionItems">

  
 <view

  
 class="suggestion-item-container"

  
 hover-class="suggestion-item-hover"

  
 hover-stay-time="100"

  
 bindtap="suggestionTap"

  
 data-item="{{item.label}}">

  
 <view class="suggestion-item">

  
 <smt-icon name="magnifying-glass" color="#ccc" size="32.61rpx"></smt-icon>

  
 <view class="search-suggestion-item">

  
 <block s-for="text in item.textArr">

  
 <text selectable="false" class="{{text === searchValue ? 'text-highlight' : ''}}">{{text}}</text>

  
 </block>

  
 </view>

  
 <view catchtap="suggestionArrowTap" data-item="{{item.label}}">

  
 <smt-icon name="arrow-top-left" color="#ccc" size="32.61rpx"></smt-icon>

  
 </view>

  
 </view>

  
 </view>

  
 </block>

  
 </view>

  
 <view class="search-result-area swan-security-margin-bottom" s-if="searchValue !== '' && suggestionItems.length == 0 && searchResult.length > 0">

  
 <block s-for="item in searchResult">

  
 <view

  
 class="search-result-item-container" 

  
 hover-class="search-result-item-hover"

  
 hover-stay-time="100"

  
 data-item="{{item}}"

  
 bindtap="resultItemTap">

  
 <view class="search-result-item">

  
 <view class="search-result-name">

  
 <block s-for="text in item.textArr">

  
 <text selectable="false" class="{{text === searchValue ? 'text-highlight' : ''}}">{{text}}</text>

  
 </block>

  
 </view>

  
 <view class="search-result-desc">{{item.desc}}</view>

  
 </view>

  
 </view>

  
 </block>

  
 </view>

  
 </view>

  
 <view class="search-status-area" s-if="isLoading || showStatus">

  
 <smt-page-status

  
 class="search-status"

  
 loading="{{pageStatus.loading}}"

  
 loading-title="{{pageStatus.loadingTitle}}"

  
 bind:smtreloading="reloading"

  
 title="{{pageStatus.title}}"

  
 desc="{{pageStatus.desc}}"

  
 icon="{{pageStatus.icon}}"

  
 showBtn="{{pageStatus.showBtn}}"

  
 btnText="{{pageStatus.btnText}}">

  
 </smt-page-status>

  
 </view>

  
</view>

 

 


  
{

  
 "navigationBarTitleText": "智能小程序示例",

  
 "navigationStyle": "custom",

  
 "usingComponents": {

  
 "topbar": "../components/topbar/topbar",

  
 "search-block": "../components/search-block/search-block",

  
 "smt-search-bar": "@smt-ui/component/src/search-bar",

  
 "smt-icon": "@smt-ui/component/src/icon",

  
 "smt-page-status": "@smt-ui/component/src/page-status"

  
 }

  
}

 

npm 依赖

Bug & Tip

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