前端仿京东、天猫带搜索历史搜索栏搜索框searchBar

快速实现前端仿京东、天猫带搜索历史搜索栏搜索框searchBar, 使用简单便利， 请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=12529

效果图如下

代码如下：

<template>

<view class="content">

<view style="margin-top: 16px;">

<!-- keyStr: 设置存储key  hisClick: 设置历史事件 searchClick:设置搜索事件 -->

<CCSearchHisView keyStr="productHisArr" searchPlaceHolder="请输入产品名称、关键字" @hisClick="selHisClick"

@searchClick="goSearchClick"></CCSearchHisView>

</view>

</view>

</template>

<script>

import CCSearchHisView from '@/components/CCSearchHisView.vue';

export default {

components: {

CCSearchHisView

},

data() {

return {

title: 'Hello'

}

},

onLoad() {

},

methods: {

selHisClick(item) {

console.log('选择的值 = ' + item);

uni.navigateTo({

url: '/pages/index/search?name=' + item

})

},

goSearchClick(item) {

uni.navigateTo({

url: '/pages/index/search?name=' + item

})

},

}

}

</script>

<style scoped>

page {

background-color: '#F6F7FA' !important;

}

.content {

display: flex;

flex-direction: column;

background-color: #F6F7FA;

height: 100vh;

}

.logo {

height: 200rpx;

width: 200rpx;

margin-top: 200rpx;

margin-left: auto;

margin-right: auto;

margin-bottom: 50rpx;

}

.text-area {

display: flex;

justify-content: center;

}

.title {

font-size: 36rpx;

color: #8f8f94;

}

</style>