快速实现前端仿京东、天猫带搜索历史搜索栏搜索框searchBar, 使用简单便利，

效果图如下

使用方法

使用方法
复制代码

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

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

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

@searchClick="goSearchClick"></CCSearchHisView>

</view>
			
					

HTML代码部分

html
复制代码

<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>

阅读全文下载完整组件代码请关注微信公众号： 前端组件开发