完整效果演示

首先完成这个伪搜索框

src/components/search/index.vue （通用搜索框组件）

<template> <div class="mine-search-box-wrapper"> <i class="iconfont icon-search"></i> <div class="mine-search-box" v-if="fake">{{placeholder}}</div> <input class="mine-search-box" type="text" title="搜索框" :placeholder="placeholder" ref="input" v-model="query" v-if="!fake" > <i class="iconfont icon-close" v-show="query" @click="reset" ></i> </div></template><script>import {debounde} from 'assets/js/util';export default { name:'Search', props:{//接收的参数 placeholder:{ type:String, default:'请输入搜索内容' }, fake:{ type:Boolean, default:false } }, data(){ return{ query:'', } }, watch:{ query:debounde(function(){ this.$emit('query',this.query); }) }, methods:{ focus(){ this.$refs.input && this.$refs.input.focus(); }, clear(){ this.query=''; }, reset(){//重置 this.clear(); this.focus(); } }}</script><style lang="scss" scoped> $search-box-height: 30px; $icon-color: #ccc; $icon-font-size-sm: 18px; .mine-search-box-wrapper { display: flex; align-items: center; width: 85%; height: $search-box-height; padding: 0 7px; background-color: #fff; border-radius: $search-box-height / 2; margin-left:15px; } .iconfont { color: $icon-color; font-size: $icon-font-size-sm; font-weight: bold; } .mine-search-box { flex: 1; background: none; border: none; margin: 0 6px; color: #666; line-height: 1.5; }</style>

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

<template> <div class="header"> <i class="iconfont icon-scan header-left"></i> <div class="header-center"> <search placeholder="开学季有礼，好货五折起" @query='getQuery' fake @click.native="goToSearch" /> </div> <i class="iconfont icon-msg header-right"></i> </div></template><script>import Search from 'components/search';export default { name:'CategoryHeader', components:{ Search }, methods:{ getQuery(query){ console.log(query); }, goToSearch(){ this.$router.push('/search'); } }}</script><style lang="scss" scoped> .header{ background-color:rgba(222, 24, 27, 0.9); transition:background-color 0.5s; display: flex; justify-content: space-between; align-items: center; padding:5px 20px; .iconfont{ font-size:24px; color:#fff; } .header-center{ flex:1; } } </style>

点击搜索框之后会跳转到真正的搜索页

热门搜索组件

src/pages/search/hot.vue

<template> <div class="hot"> <h4 class="hot-title">热门搜索</h4> <div class="loading-container" v-if="!hots.length"> <me-loading/> </div> <ul class="hot-list" v-else> <li class="hot-item" v-for="(item,index) in hots" :key="index" @click="$_selectItem(item.hotWord)"> {{item.hotWord}} </li> </ul> </div></template><script>import Search from 'components/search';import MeLoading from 'components/loading';import {getHot} from 'api/search';import {searchMixin} from 'api/mixins';export default { name:'SearchHot', components:{ MeLoading }, data(){ return{ hots:[] } }, mixins:[searchMixin], created(){ this.getHot().then(()=>{ this.$emit('loaded'); }) }, methods:{ getHot(){ return getHot().then(data=>{ return new Promise(resolve=>{ if(data){ this.hots=data; resolve(); } }) }) } }}</script><style lang="scss" scoped>$border-color: #e5e5e5;$font-size-base: 12px;$font-size-l: $font-size-base + 2; .hot { padding-left: 10px; background-color: #fff; border-bottom: 1px solid $border-color; margin-bottom: 10px; &-title { height: 34px; line-height: 34px; font-size: $font-size-l; font-weight: bold; } &-list { display: flex; flex-wrap: wrap; } &-item { padding: 8px; background-color: #f0f2f5; border-radius: 4px; margin: 0 10px 10px 0; color: #686868; } } .loading-container { padding: 10px 0; }</style>

axios获取热门搜索数据

src/api/search.js

import axios from 'axios';//获取热门搜索数据 ajaxexport const getHot=()=>{ return axios.get('http:///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( ) 实现异步

总结

到此这篇关于vue搜索页开发（热门搜索，历史搜索，淘宝接口演示）的文章就介绍到这了,更多相关vue搜索页开发内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！