• page-search 搜索頁模板
  • 示例
  • 頁面內容
    • 搜索頁模板
  • npm 依賴
  • Bug & Tip

page-search 搜索頁模板

從開發(fā)者工具 v2.25.1-rc 版本開始支持。

萊西ssl適用于網站、小程序/APP、API接口等需要進行數據傳輸應用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

解釋：搜索頁模板。包括搜索框、搜索推薦、搜索運營、搜索結果列表等內容。

示例

掃碼體驗

代碼示例

請使用百度APP掃碼

頁面內容

搜索頁模板

包括導航欄、搜索框、搜索歷史區(qū)域、搜索推薦區(qū)域、搜索推薦列表、搜索結果列表等內容，開發(fā)者可根據自身需要添加或刪除模塊。
頁面路徑：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"
  
  
  
 }
  
  
  
}