百度智能小程序 搜索页模板

page-search 搜索页模板

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

示例

前提条件

• 已完成小程序创建。
• 已下载并安装百度小程序开发者工具（简称 IDE）。

使用说明

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

使用方式

【 NPM 】

1. 在小程序根目录执行下方命令，下载页面模板的 npm 包：

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

2. 将 /node_modules/@smt-ui-template/page-search 下的 @smt-ui-template-page-search 文件夹拷贝到当前小程序合适的目录下 （如pages）:

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

3. 在小程序根目录的 app.json 中配置模板页面的 path 路径，查看效果，如：

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

4. 为了方便在开发者工具中查看模版页的效果，可以设置模板页为小程序预览的首页。详情请见自定义编译文档。
   

代码示例

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

页面内容

搜索模板页

页面路径： index/index

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

NPM 依赖