vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演

<script>
import MeLoading from 'components/loading';
import {getSearchResult} from 'api/search';
import {searchMixin} from 'api/mixins';

export default {
name:'SearchResult',
components:{
MeLoading
},
data(){
return{
results:[],
loading:false
}
},
props:{
query:{
type:String,
default:''
}
},
mixins:[searchMixin],
watch:{
query(query){

this.getResults(query);
}
},
methods:{
getResults(keyword){
if(!keyword){
return;
}

this.loading=true;
getSearchResult(keyword).then(data=>{
console.log(data);
if(data){

this.results=data;
this.loading=false;
}
})
}
}
}
</script>

修改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( ) 

总结

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