前端仿京东、天猫带搜索历史搜索栏搜索框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 {

 

}

.content {

display: flex;

flex-direction: column;

 

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>

 

posted @   前端组件开发  阅读(105)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示