重慶分公司,新征程啟航
為企業(yè)提供網(wǎng)站建設(shè)、域名注冊(cè)、服務(wù)器等服務(wù)
為企業(yè)提供網(wǎng)站建設(shè)、域名注冊(cè)、服務(wù)器等服務(wù)
這篇文章主要講解了如何實(shí)現(xiàn)vue搜索頁(yè)開(kāi)發(fā),內(nèi)容清晰明了,對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。
在網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)中從網(wǎng)站色彩、結(jié)構(gòu)布局、欄目設(shè)置、關(guān)鍵詞群組等細(xì)微處著手,突出企業(yè)的產(chǎn)品/服務(wù)/品牌,幫助企業(yè)鎖定精準(zhǔn)用戶,提高在線咨詢和轉(zhuǎn)化,使成都網(wǎng)站營(yíng)銷成為有效果、有回報(bào)的無(wú)錫營(yíng)銷推廣。創(chuàng)新互聯(lián)專業(yè)成都網(wǎng)站建設(shè)十載了,客戶滿意度97.8%,歡迎成都創(chuàng)新互聯(lián)客戶聯(lián)系。
完整效果演示
首先完成這個(gè)偽搜索框
src/components/search/index.vue (通用搜索框組件)
{{placeholder}}
src/assets/js/util.js 節(jié)流函數(shù)(防止請(qǐng)求數(shù)據(jù)時(shí)頻率過(guò)快消耗性能)
//函數(shù)節(jié)流 export const debounde=(func,delay=200)=>{ let timer=null; return function(...args){ timer && clearTimeout(timer); timer=setTimeout(()=>{ func.apply(this,args); },delay); } }
在分類頁(yè)的頭部組件中引入搜索框組件
src/pages/category/header.vue
點(diǎn)擊搜索框之后會(huì)跳轉(zhuǎn)到真正的搜索頁(yè)
熱門(mén)搜索組件
src/pages/search/hot.vue
熱門(mén)搜索
- {{item.hotWord}}
axios獲取熱門(mén)搜索數(shù)據(jù)
src/api/search.js
import axios from 'axios'; //獲取熱門(mén)搜索數(shù)據(jù) 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('沒(méi)有成功獲取到數(shù)據(jù)'); }).catch(err=>{ console.log(err); }); }
點(diǎn)擊搜索的關(guān)鍵詞,跳轉(zhuǎn)到淘寶搜索程序
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);//這次的關(guān)鍵詞如果在搜索歷史里已存在,先剔除掉 } keywords.unshift(keyword);//把這次的關(guān)鍵詞放在搜索歷史的最開(kāi)頭 storage.set(SEARCH_HISTORY_KEYWORD_KEY,keywords);//更新搜索歷史 //跳轉(zhuǎn)到淘寶搜索頁(yè) location.href = `https://s.m.taobao.com/h6?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}`; } } }
本地存儲(chǔ)文件 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; } }
搜索頁(yè)配置文件 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
列表樣式統(tǒng)一抽離出去
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{ // 必須設(shè)置,否則內(nèi)容滾動(dòng)效果無(wú)法實(shí)現(xiàn) width:100%; height:100%; } ul,li{ list-style:none; } a{ text-decoration: none; color:#333; }
確認(rèn)框組件
src/components/comfirm/index.vue
{{title}}{{msg}}
搜索結(jié)果頁(yè)
src/pages/search/result.vue
- {{item[0]}}
沒(méi)有結(jié)果
修改src/api/search.js
import axios from 'axios'; import jsonp from 'assets/js/jsonp'; //獲取熱門(mén)搜索數(shù)據(jù) 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('沒(méi)有成功獲取到數(shù)據(jù)'); }).catch(err=>{ console.log(err); }); } //獲取搜索框的搜索結(jié)果 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('沒(méi)有成功獲取到數(shù)據(jù)!'); }).catch(err => { if (err) { console.log(err); } }); };
最后,當(dāng)刪除歷史搜索之后,也需要更新滾動(dòng)條
修改src/pages/search/index.vue
修改src/pages/search/history.vue
(因?yàn)轫?yè)面加載時(shí)有100ms延遲的動(dòng)畫(huà),因此這里更新滾動(dòng)條也需要相同的延遲)
注意滾動(dòng)條組件的更新操作,需要使用 $nextTick( )
實(shí)現(xiàn)異步
看完上述內(nèi)容,是不是對(duì)如何實(shí)現(xiàn)vue搜索頁(yè)開(kāi)發(fā)有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。