百度智能小程序 搜索頁(yè)模板

page-search 搜索頁(yè)模板

解釋: 搜索頁(yè)模板，包括搜索框、搜索推薦、搜索運(yùn)營(yíng)、搜索結(jié)果列表等內(nèi)容。

示例

前提條件

• 已完成小程序創(chuàng)建。
• 已下載并安裝百度小程序開(kāi)發(fā)者工具（簡(jiǎn)稱 IDE）。

使用說(shuō)明

• 本示例為小程序前端代碼，可直接在模擬器和真機(jī)預(yù)覽。
• 模板中使用的是測(cè)試數(shù)據(jù)，開(kāi)發(fā)者需要從接口中獲取真實(shí)的數(shù)據(jù)。
• 頁(yè)面模板功能從開(kāi)發(fā)者工具 v2.25.1-rc 版本開(kāi)始支持。
• 該模板使用了 es6 語(yǔ)法，需要開(kāi)啟開(kāi)發(fā)者工具的增強(qiáng)編譯，操作步驟參看開(kāi)啟說(shuō)明；同時(shí)也需開(kāi)啟上傳代碼時(shí)樣式自動(dòng)補(bǔ)全。

使用方式

【 NPM 】

1. 在小程序根目錄執(zhí)行下方命令，下載頁(yè)面模板的 npm 包：

   npm i @smt-ui-template/page-search
   

2. 將 /node_modules/@smt-ui-template/page-search 下的 @smt-ui-template-page-search 文件夾拷貝到當(dāng)前小程序合適的目錄下 （如pages）:

   .
   ├── project.swan.json
   ├── app.json
   ├── app.js
   ├── pages
       └── @smt-ui-template-page-search    // 模板文件
   

3. 在小程序根目錄的 app.json 中配置模板頁(yè)面的 path 路徑，查看效果，如：

   {
       "pages": [
           ...
           "pages/@smt-ui-template-page-search/index/index"
           ...
       ]
   }
   

4. 為了方便在開(kāi)發(fā)者工具中查看模版頁(yè)的效果，可以設(shè)置模板頁(yè)為小程序預(yù)覽的首頁(yè)。詳情請(qǐng)見(jiàn)自定義編譯文檔。
   

代碼示例

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

頁(yè)面內(nèi)容

搜索模板頁(yè)

頁(yè)面路徑： index/index

搜索模板頁(yè)包括導(dǎo)航欄、搜索框、搜索歷史區(qū)域、搜索推薦區(qū)域、搜索推薦列表、搜索結(jié)果列表等內(nèi)容，開(kāi)發(fā)者可根據(jù)自身需要添加或刪除模塊。

NPM 依賴