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

2020-09-03 16:22 更新

page-search 搜索页模板

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

示例


前提条件

使用说明

  • 本示例为小程序前端代码,可直接在模拟器和真机预览。
  • 模板中使用的是测试数据,开发者需要从接口中获取真实的数据。
  • 页面模板功能从开发者工具 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 依赖

名称 版本号
@smt-ui/component latest


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号