更新记录

1.0.2(2022-06-15) 下载此版本

1.增加:组件接收上个页面传递的参数 进行搜索。

1.0.1(2022-06-14) 下载此版本

1.优化逻辑 2.增加完整说明文档 +案例

1.0.0(2022-05-29) 下载此版本

1.重构整个搜索页面
2.只测了vue2的微信小程序+h5端,v3没测
查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.21 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

【2023-搜索页面-可能是最好用的插件】

d-search-log


弹框插件: https://ext.dcloud.net.cn/plugin?id=2708

日历插件: https://ext.dcloud.net.cn/plugin?id=2779

1. /pages/index/index.vue 为案例文件

2. 素材图片的话 复制到   /static/目录下

或者直接复制下边代码


<template>
    <view>

        <cu-custom bgColor="my-theme-bg" :isBack="false">
            <block slot="backText">返回</block>
            <block slot="content">搜索页面</block>
        </cu-custom>

        <d-search-log 
        :color_border="color_border"
        :color_text="color_border"
        :search_list_hot="search_list_hot"
        :store_key="store_key"
        @onClickDelAllApi="onClickDelAll"
        @onSearchNameApi="onSearchName"
        ></d-search-log>

    </view>
</template>

<script>
    import dSearchLog from '@/uni_modules/d-search-log/components/d-search-log/d-search-log.vue'

    export default {
        components: {
            "dSearchLog": dSearchLog
        },
        computed:{

        },

        data() {
            return {
                color_border:"#ff00ff",
                search_list_hot:[],
                store_key:'search_list',
            }
        },
        onLoad() {

            this.search_list_hot = [
                '手机','电脑','河南老君山','三亚一游','北京环球影城','杭州西湖','保定驴肉火烧','保定狼牙山玻璃栈道'
            ]
        },
        methods: {
            onClickDelAll() {
                console.log('[父级接收事件]:删除全部搜索记录')
            },
            onSearchName(e) {
                console.log('[父级接收事件]:点击搜索:'+e)
            }
        }
    }
</script>

<style>

    .my-theme-bg {
        background: linear-gradient(117deg,#60DF9D,#31CB7B);
        color:#fff;
        /* background: linear-gradient(117deg,#23C0F7,#ff661e); */
        /* background: linear-gradient(90deg, #FFAA57, #23C0F7); */
        /* background: linear-gradient(90deg, #F37749, #FFAA57); */
        /* #FFAA57 */
        /* background-image: linear-gradient(45deg, #39b54a, #8dc63f); */
        /* color: #ffffff; */
        /* background-color: #f37b1d; */
        /* color: #ffffff; */
        /* background-color: #ffffff; */
        /* color: #666666; */
        /* linear-gradient(-27deg, #33CB80, #28D0AF) */
        /* background-image: line=ar-gradient(-27deg,#33CB80,#28D0AF); */
        /* color: #ffffff; */
        /* background-image: line=ar-gradient(-27deg,#fff,#fff); */
        /* background-image: line=ar-gradient(-27deg,#23C0F7,#23C0F7); */
        /* color: #000; */
    }
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

缓存权限

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问