关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

云南大王-vue搜索页开发(热门搜索,历史搜索,淘宝接口演示)

发布时间:2020-04-13 00:00:00
完整效果演示   首先完成这个伪搜索框 src/components/search/index.vue (通用搜索框组件)   src/assets/js/util.js  节流函数(防止请求数据时频率过快消耗性能) //函数节流 export const debounde=(func,delay=200)=>{ let timer=null; return function(...args){ timer && clearTimeout(timer); timer=setTimeout(()=>{ func.apply(this,args); },delay); } }   在分类页的头部组件中引入搜索框组件 src/pages/category/header.vue   点击搜索框之后会跳转到真正的搜索页     热门搜索组件     src/pages/search/hot.vue   axios获取热门搜索数据 src/api/search.js import axios from 'axios'; //获取热门搜索数据 ajax export const getHot=()=>{ return axios.get('http://www.imooc.com/api/search/hot').then(res=>{ res=res.data.hotKeyWord; if(res && res.owner){ return res.owner; } throw new Error('没有成功获取到数据'); }).catch(err=>{ console.log(err); }); }   点击搜索的关键词,跳转到淘宝搜索程序 src/api/mixins.js import storage from 'assets/js/storage'; import {SEARCH_HISTORY_KEYWORD_KEY} from 'pages/search/config'; export const searchMixin={ methods:{ $_selectItem(keyword){ let keywords=storage.get(SEARCH_HISTORY_KEYWORD_KEY,[]);//找到所有搜索历史 if(keywords.length!=0){ keywords=keywords.filter(val=>val!=keyword);//这次的关键词如果在搜索历史里已存在,先剔除掉 } keywords.unshift(keyword);//把这次的关键词放在搜索历史的最开头 storage.set(SEARCH_HISTORY_KEYWORD_KEY,keywords);//更新搜索历史 //跳转到淘宝搜索页 location.href = `https://s.m.taobao.com/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/storage.js const storage = window.localStorage; export default { set(key, val) { if (val === undefined) { return; } storage.setItem(key, serialize(val)); }, get(key, def) { const val = deserialize(storage.getItem(key)); return val === undefined ? def : val; }, remove(key) { storage.removeItem(key); }, clear() { storage.clear(); } }; function serialize(val) { return JSON.stringify(val); } function deserialize(val) { if (typeof val !== 'string') { return undefined; } try { return JSON.parse(val); } catch (e) { return val || undefined; } }   搜索页配置文件 src/pages/search/config.js const prefix = 'mall-search'; const suffix = 'key'; export const SEARCH_HISTORY_KEYWORD_KEY = `${prefix}-history-keyword-${suffix}`;   历史搜索组件     src/pages/search/history.vue   列表样式统一抽离出去 src/assets/scss/_list.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/index.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/index.vue    搜索结果页     src/pages/search/result.vue   修改src/api/search.js import axios from 'axios'; import jsonp from 'assets/js/jsonp'; //获取热门搜索数据 ajax export const getHot=()=>{ return axios.get('http://www.imooc.com/api/search/hot').then(res=>{ res=res.data.hotKeyWord; if(res && res.owner){ return res.owner; } throw new Error('没有成功获取到数据'); }).catch(err=>{ console.log(err); }); } //获取搜索框的搜索结果 export const getSearchResult=keyword=>{ const url='https://suggest.taobao.com/sug'; const params={ q:keyword, code:'utf-8', area:'c2c', nick:'', sid:null }; //https://suggest.taobao.com/sug?q=apple&code=utf-8&area=c2c&nick=&sid=null&callback=jsonp5 return jsonp(url, params, { param: 'callback' }).then(res => { console.log(res); if (res.result) { // console.log(res); return res.result; } throw new Error('没有成功获取到数据!'); }).catch(err => { if (err) { console.log(err); } }); };   最后,当删除历史搜索之后,也需要更新滚动条 修改src/pages/search/index.vue     修改src/pages/search/history.vue (因为页面加载时有100ms延迟的动画,因此这里更新滚动条也需要相同的延迟)     注意滚动条组件的更新操作,需要使用 $nextTick( ) 实现异步  

/template/Home/Zkeys/PC/Static