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

page-search 搜索页模板

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

莱西ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：13518219792（备注：SSL证书合作）期待与您的合作！

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

示例

扫码体验

代码示例

请使用百度APP扫码

页面内容

搜索页模板

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

代码示例

• SWAN
• JSON

 
 
 

  
  
  

  
  
  

  
  
  
 

  
  
  
 title="搜索"
  
  
  
 has-back="{{showBack}}"
  
  
  
 backgroundColor="#fff"
  
  
  
 bindnavigateback="navigateBack">
  
  
  
 
  
  
  
 
  
  
  
 

  
  
  
 search-icon-color="#999"
  
  
  
 placeholder="{{searchPlaceholder}}"
  
  
  
 preset-word="{{searchPresetword}}"
  
  
  
 value="{=searchValue=}"
  
  
  
 focus="{=isFocus=}"
  
  
  
 bindsearch="search"
  
  
  
 bindclear="clear"
  
  
  
 bindinput="input"
  
  
  
 bindfocus="focus"
  
  
  
 theme="white"/>
  
  
  
 
  
  
  
 
  
  
  
 

  
  
  
 title="历史搜索"
  
  
  
 max-height="367.75rpx"
  
  
  
 s-if="historyItems.length > 0 && searchValue == ''">
  
  
  
 
  
  
  
 
  
  
  
 全部删除
  
  
  
 完成
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 

  
  
  
 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}}
  
  
  
 

  
  
  
 class="icon-delete"
  
  
  
 s-if="item.status === 1"
  
  
  
 name="delete"
  
  
  
 color="#999"
  
  
  
 size="21.74rpx">
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 

  
  
  
 title="大家都在搜"
  
  
  
 max-height="289.86rpx"
  
  
  
 s-if="operateItems.length > 0 && searchValue == ''">
  
  
  
 
  
  
  
 
  
  
  
 

  
  
  
 class="operate-item {{index % 2 == 0 ? '' : 'operate-odd'}}" 
  
  
  
 hover-class="operate-item-hover"
  
  
  
 hover-stay-time="100"
  
  
  
 bindtap="operateItemTap"
  
  
  
 data-item="{{item}}">{{item}}
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 

  
  
  
 class="suggestion-item-container"
  
  
  
 hover-class="suggestion-item-hover"
  
  
  
 hover-stay-time="100"
  
  
  
 bindtap="suggestionTap"
  
  
  
 data-item="{{item.label}}">
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 {{text}}
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 

  
  
  
 class="search-result-item-container" 
  
  
  
 hover-class="search-result-item-hover"
  
  
  
 hover-stay-time="100"
  
  
  
 data-item="{{item}}"
  
  
  
 bindtap="resultItemTap">
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 {{text}}
  
  
  
 
  
  
  
 
  
  
  
 {{item.desc}}
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 

  
  
  
 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}}">
  
  
  
 
  
  
  
 
  
  
  

 
 
 

 
 
 

  
  
  
{
  
  
  
 "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"
  
  
  
 }
  
  
  
}