2023年7月9日发(作者：)

vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接⼝演⽰）完整效果演⽰⾸先完成这个伪搜索框src/components/search/ （通⽤搜索框组件）src/assets/js/ 节流函数（防⽌请求数据时频率过快消耗性能）//函数节流export const debounde=(func,delay=200)=>{ let timer=null; return function(...args){ timer && clearTimeout(timer); timer=setTimeout(()=>{ (this,args); },delay); }}在分类页的头部组件中引⼊搜索框组件src/pages/category/点击搜索框之后会跳转到真正的搜索页热门搜索组件src/pages/search/axios获取热门搜索数据src/api/rt axios from 'axios';//获取热门搜索数据 ajaxexport const getHot=()=>{ return ('/api/search/hot').then(res=>{

res=Word; if(res && ){ return ; } throw new Error('没有成功获取到数据'); }).catch(err=>{ (err); });}点击搜索的关键词，跳转到淘宝搜索程序src/api/rt storage from 'assets/js/storage';import {SEARCH_HISTORY_KEYWORD_KEY} from 'pages/search/config';export const searchMixin={ methods:{ $_selectItem(keyword){ let keywords=(SEARCH_HISTORY_KEYWORD_KEY,[]);//找到所有搜索历史

if(!=0){ keywords=(val=>val!=keyword);//这次的关键词如果在搜索历史⾥已存在，先剔除掉 }

t(keyword);//把这次的关键词放在搜索历史的最开头

(SEARCH_HISTORY_KEYWORD_KEY,keywords);//更新搜索历史

//跳转到淘宝搜索页 = `/h5?event_submit_do_new_search_auction=1&_input_charset=utf-8&topSearch=1&atype=b&searchfrom=1&action=home%3Aredirect_app_action&from=1&sst=1&n=20&buying=buyitnow&q=${keyword}`; } }}本地存储⽂件 assets/js/t storage = torage;export default { set(key, val) { if (val === undefined) { return; } m(key, serialize(val)); }, get(key, def) { const val = deserialize(m(key)); return val === undefined ? def : val; }, remove(key) { Item(key); }, clear() { (); }};function serialize(val) { return ify(val);}function deserialize(val) { if (typeof val !== 'string') { return undefined; } try { return (val); } catch (e) { return val || undefined; }} 搜索页配置⽂件 src/pages/search/t prefix = 'mall-search';const suffix = 'key';export const SEARCH_HISTORY_KEYWORD_KEY = `${prefix}-history-keyword-${suffix}`;历史搜索组件src/pages/search/列表样式统⼀抽离出去src/assets/scss/_// list@mixin flex-between() { display: flex; justify-content: space-between; align-items: center; }//ellipsis@mixin ellipsis() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } $border-color: #e5e5e5;

.g-list { padding-left: 10px;}.g-list-item { overflow: hidden; @include flex-between(); height: 44px; padding-right: 10px; border-bottom: 1px solid $border-color; color: #686868; &:last-child { border-bottom: none; }}.g-list-text { flex: 1; line-height: 1.5; @include ellipsis();}src/assets/scss/@import 'icons';@import 'list';*{ margin:0; padding:0;}html,body{ // 必须设置，否则内容滚动效果⽆法实现 width:100%; height:100%;}ul,li{ list-style:none;}a{ text-decoration: none; color:#333;}确认框组件src/components/comfirm/ 搜索结果页src/pages/search/修改src/api/rt axios from 'axios';import jsonp from 'assets/js/jsonp';//获取热门搜索数据 ajaxexport const getHot=()=>{ return ('/api/search/hot').then(res=>{

res=Word; if(res && ){ return ; } throw new Error('没有成功获取到数据'); }).catch(err=>{ (err); });}//获取搜索框的搜索结果export const getSearchResult=keyword=>{ const url='/sug';

const params={ q:keyword, code:'utf-8', area:'c2c', nick:'', sid:null }; ///sug?q=apple&code=utf-8&area=c2c&nick=&sid=null&callback=jsonp5 return jsonp(url, params, { param: 'callback' }).then(res => { (res); if () { // (res); return ; } throw new Error('没有成功获取到数据！'); }).catch(err => { if (err) { (err); } });};最后，当删除历史搜索之后，也需要更新滚动条修改src/pages/search/修改src/pages/search/（因为页⾯加载时有100ms延迟的动画，因此这⾥更新滚动条也需要相同的延迟）注意滚动条组件的更新操作，需要使⽤

$nextTick( )

实现异步总结到此这篇关于vue搜索页开发（热门搜索，历史搜索，淘宝接⼝演⽰）的⽂章就介绍到这了,更多相关vue搜索页开发内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！